dom 相关问题

通过文档对象模型,将此标记用于有关其他语言与XML / HTML交互的问题。不要将其用作HTML,JavaScript或SAX的简写 - 使用其他标记来表示语言和标记。

Blob 对象与其数据之间的关系

当我使用 createObjectURL 获取 Blob 对象的 url 并且随后不保存任何对 Blob 对象的引用时,Blob 对象是否会被垃圾回收?或者在url撤销之前不会被GCed? 异步

回答 1 投票 0

用js播放视频,不限制用户交互

需要使用 chrome 扩展的内容脚本文件中的 js 播放视频元素。 错误是: DOMException:play() 失败,因为用户没有先与文档交互。 我有...

回答 1 投票 0

DOM:迭代不包括匹配相同选择器的嵌套元素的元素

(请不要使用JQUERY) 假设我有以下树。我想迭代从 div.foo 开始匹配 querySelectorAll('div.bar') 的元素,但不迭代匹配相同选择的子元素...

回答 3 投票 0


Blazor JSInterop 从 DOM 获取元素属性

我使用 Visual Studio 2022 样板项目制作了 Blazor 服务器端 Web 应用程序。我仍在使用 .NET 7,因为我的公司更新速度很慢。 我已经按照本教程使用 JSIn...

回答 1 投票 0

如何获取表单的多个元素并为其添加属性?

送货信息 国家: <form name="myform"> <fieldset> <legend>Delivery Information</legend> <p>Country: <input pattern="^[A-Za-z]" type="text" name="textInput" size="25" placeholder="input country..."></p> <p>Street: <input pattern="^[A-Za-z0-9]" type="text" name="street" size="30" placeholder="input street..."></p> <p>City: <input pattern="^[A-Za-z ]" type="text" name="textInput" size="20" placeholder="input city..."></p> <p>Zip: <input pattern="(\d{5}([\-]\d{4})?)" type="text" name="zip" size="5" placeholder="#####"></p> </fieldset> </form> 所以,我有一个表单,我想使用 JavaScript DOM 获取名称为“textInput”的所有输入元素(我有其他输入),并添加一个属性oninvalid="please, only use letters"。 只有 JavaScript,所以没有 jQuery。 您可以使用此功能: function changeAttributes() { var x = document.getElementsByName("textInput"); for(var i = 0; i < x.length, i++) { x[i].setAttribute("oninvalid", "please, only use letters"); } } 尝试以下: $('input[name=textInput]').attr("oninvalid", "please, only use letters");

回答 2 投票 0

子元素如何访问自定义 Web 组件类函数和变量?

在使用 和 标签定义的自定义组件中,子元素可以获取作为自定义组件的父元素,然后使用此元素引用来访问... 在使用 <template> 和 <slot> 标签定义的自定义组件中,子元素可以获取作为自定义组件的父元素,然后使用此元素引用来访问类定义的变量和函数。 但是,子元素如何知道哪个元素是自定义组件呢? 模板本身包含在影子 DOM 中。当在页面上渲染自定义组件时,这个影子 DOM 会被克隆并附加到自定义组件中作为其宿主。 插入到自定义组件中的元素似乎无法分辨它所附加的节点树来自克隆的影子 DOM 节点,并且无法分辨当前 DOM 树中的哪个元素是顶层自定义组件,除非它迭代每个 parentNode 以检查它们是否有 shadowRoot。 如何让自定义组件内的子元素访问自定义组件的类变量和函数? customElements.define("my-comp", class extends HTMLElement { creationTimestamp; constructor() { super(); let template = document.getElementById('my-template'); let templateContent = template.content; const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.appendChild(templateContent.cloneNode(true)); this.creationTimestamp = Date.now(); } }) <html> <template id="my-template"> I'm a new custom component using slots with value <slot name="slot1">default</slot> <button onclick="console.log(this.parentNode.host.creationTimestamp)">Print timestamp at Template level</button> </template> <my-comp> <span slot="slot1"> slotted value <div> <button onclick="console.log(this.parentNode.parentNode.parentNode.creationTimestamp)">Print timestamp</button> </div> </span> </my-comp> </html> 有几个非常简单的规则可以解耦 WebComponent: 父级到子级:单向数据绑定或HTML5属性用于传递数据并调用child.func()来执行操作。 子级到父级:子级触发事件。父母监听该事件。由于事件冒泡,您可以让任意数量的家长接收该事件,而无需额外的努力。 标准 Web 组件也使用此模式(input、textbox 等)。它还允许轻松测试,因为您不必模拟父级。 这是 Polymer 库 描述的推荐模式,它是 WebComponent 的包装器。不幸的是,我找不到描述这种模式的具体文章。 在以下示例中,父级侦听来自子级的事件,并调用自身的函数来影响其状态,或调用子级的函数以使它们执行某些操作。孩子们都不知道父母的事。 这是一种干净的方式,可确保清晰,关注点分离。孩子做他该做的事;父母可以指示它做什么,甚至对其行为做出反应。相反,孩子从不指导父母,甚至不知道。 现在我明白了。您想要防止: let timeStamp = this.parentNode.parentNode.parentNode.creationTimestamp; 有多个 StackOverflow 答案可以解决这个问题: 让孩子找到家长 控制:孩子 模仿标准 JS .closest(selector),它不会刺穿 ShadowRoots! 具有自定义 closestElement(selector) 功能: 自定义元素 getRootNode.closest() 函数跨越多个(父)shadowDOM 边界 让父母告诉一些事情给孩子 控制:父母 通过递归深入进入shadowRoots: 如何获取包含shadowRoot元素的文档或节点中的所有HTML 让家长响应孩子的来电 控制:两者子级发送事件,父级需要监听 通过自定义事件通信的Web组件无法发送数据

回答 2 投票 0

使用 DOM 解析 xml 时如何处理缺失标签?

我正在尝试使用 DOM 进行 XML 解析,但问题是某些地方缺少标签。告诉我如何处理这种情况,以便在没有它的情况下,将其他一些字符串写入数组...

回答 1 投票 0

根据渲染时间信息(即行高)调整 React DOM 中的元素

上下文 我使用 React JS 创建了一个带有行号的简单文本编辑器。它应该只编辑纯文本(即不需要富文本编辑)。文本输入字段用

回答 1 投票 0

带有 3 个参数的函数,用于创建前置元素

这是我第一次在这里发帖,如果我说了什么奇怪的话,抱歉。我目前正在学习Javascript。我只是尝试创建一个有 3 个参数的函数,一个 Parent 元素,一个 eleme...

回答 1 投票 0

如何在 contentEditable div 中的 p 标签中添加新行

我有一个 contentEditable div,每当我通过按 Enter 或 shift+enter 插入新行时,新行是 div 中的 textNode,但我希望新行位于 p 元素中。 我想要一个简单的解决方案...

回答 1 投票 0

Java Selenium 和 Angular 2 | Webdriver 以可视方式清除文本字段,但不从 DOM 中清除

我有一个使用 Selenium Webdriver 用 Java 编写的测试,它在视觉上清除了用 Angular 2 编写的文本字段,但 Selenium 实际上并没有清除 DOM 中的字段。 我需要收到来自...的警报

回答 2 投票 0

如何在 ul 中记录特定文本?

我无法弄清楚如何控制台记录 li 内部的innerText,而不是嵌套在 li 内部的 p。 超文本标记语言 坦克 t... 我不知道如何控制台记录 li 内部的innerText,而不是嵌套在 li 内部的 p。 HTML <ul id="list"> <li>Tank <p>this is tank</p> </li> <li>Warrior <p>this is warrior</p> </li> <li>Ninja <p>this is ninja</p> </li> </ul> JavaScript const listChoice = document.querySelectorAll('li') listChoice.forEach(cls => { cls.addEventListener('click', (e) => { const choice = e.target.innerText console.log(choice) if (choice === 'Tank') { console.log('You chose tank') } }) }) 我无法让我的选择变量等于目标innerText,以便console.log('you Choose Tank')显示在控制台中。 我尝试使用firstChild,它记录了“Tank” 您试图在单击 li 元素时记录它们的内部文本。但是,由于 li 元素还包含 p 元素,因此您需要确保获得正确的文本。为此,请使用 li 元素的 textContent 属性,该属性检索 li 元素内的文本内容,然后使用 trim() 删除任何前导或尾随空格。 通过此修改,您应该能够捕获 li 元素中的文本并使您的条件语句按预期工作。在此代码中,当您单击 li 元素时,它会记录该 li 元素的文本内容并检查它是否等于“Tank”以记录相应的消息。

回答 1 投票 0

为什么使用 CSS insertRule 时 DOM 没有更新?

我想向 DOM 添加 CSS 规则: 这是我的代码 函数empty_rule(工作表,类名){ const索引=sheet.cssRules.length; sheet.insertRule(`.${class_name} { }`, index); 返回...

回答 2 投票 0

useSignal 在更新对象中的值时重新渲染状态,为什么?

我注意到,当我更新信号变量中的单个值(例如( const count = useSignal(0) )时,DOM 不会重新渲染,但是当我更新对象的值时,DOM 会重新渲染) -渲染

回答 1 投票 0

如何将 Shadow Dom 与 Javascript 和 CSS 模块一起使用

我正在尝试在我的 Javascript 模块中使用 Shadow DOM,并将 CSS 模块/工作表导入到 Javascript 模块中:- 模块.js 从 '/styles.css' 导入表断言 {type: 'css'}; 导出功能

回答 1 投票 0

如何修复这个错误?我正在使用超集来反应应用程序

我正在尝试将超集集成到我的应用程序中,但我不能,因为我遇到了这个错误,该错误与框架有关,而我在代码中没有使用框架,这是代码: 从“re...

回答 1 投票 0

在 Xamarin WebView (Visual Studio 2019) 中修改源 HTML

我知道使用 Visual Studio 创建 Android 应用程序并不流行,但我更喜欢它。不过,如果我需要使用 Android Studio,我可以。 我的应用程序在 WebView 中加载网页。这部分有效。现在...

回答 1 投票 0

Android Webview -> 在 webview 的 localStorage 中设置值时未捕获安全错误

我需要通过在本地和会话存储中设置一些属性来加载android中的webview。 我尝试在 webView.evaluateJavascript("window.

回答 2 投票 0

添加一些 DOM 之后恢复为纯 div

我有一个用html创建的div。在本次潜水中,我使用 JavaScript 添加了一些元素。然后我克隆了添加了这些新元素的 div。克隆过程完成后,我想要我创建的 div...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.