dom 相关问题

为什么React片段<></>在循环渲染时需要唯一的key属性

所以根据文档，React 片段不会出现在 DOM 上。它不会向 DOM 注入任何元素。 但是假设我们想要在一个循环中渲染元素，该循环内部是一个片段 elementList.map((

当我们加载或刷新 dom 时，自动播放视频

为什么当 DOM 加载或刷新时，我们设置为自动播放和循环的视频不会自动播放，直到我们点击任何未设置任何 href 的标签？ 如果这是异步的

使用 Powershell 删除和更新 Xml 节点

我有以下xml 并想替换“defaultProxy”节点ab...

检测 iframe 何时获得或失去焦点

检测 iframe 何时获得或失去焦点（即是否会接收键盘事件）的正确方法是什么？以下内容在 Fx4 中不起作用： var iframe = /* 我的 iframe */; iframe。

使用xpath有条件地选择div

我只想在条件满足/有效时选择一个div。 渲染 html 时，以下 div 可以以两种方式出现（按钮将启用/禁用）。 启用按钮状态： 我只想在条件满足/有效时选择一个div。 渲染 html 时，以下div可以以两种方式呈现（按钮将启用/禁用）。 启用按钮状态： <div class="buySellOrder_bso21ProductOption__9UpPt bodySmall cur-po buySellOrder_bso21InactiveProductOption__qrf7D contentPrimary">Intraday</div> 禁用按钮状态： <div class="buySellOrder_bso21ProductOption__9UpPt bodySmall cur-po buySellOrder_bso21InactiveProductOption__qrf7D contentPrimary buySellOrder_bso21MisDisabled__86CjY contentPrimary">Intraday</div> 我只想在启用时选择此按钮。仅当 div 包含类 buySellOrder_bso21ProductOption__9UpPt 而不是 buySellOrder_bso21MisDisabled__86CjY 时才选择它 我尝试了以下方法，但不起作用 //*[(contains(@class,"buySellOrder_bso21ProductOption__9UpPt") and not contains(@class,"buySellOrder_bso21MisDisabled__86CjY")) and contains(text(),"Intraday")] 还有其他方法吗？ 我会尝试消除 @class 属性中的随机字符串并使用以下 XPath： //*[@class[contains(.,"buySellOrder") and not(contains(.,"Disabled"))] and contains(text(),"Intraday")] 说明： [@class[contains(.,"buySellOrder") and not(contains(.,"Disabled"))]： 由于我们多次使用 @class，因此将谓词放在该 @class 属性上。并像这样使用 not not()

DOCTYPE 是 HTML 标签的父级吗？

下面的代码给出了 HTML 格式的输出。我对 DOCTYPE 感到困惑。这里 HTML 标签的父标签是什么？是文档类型吗？ html = 列表(汤.children)[1] 打印（html）

检测reportValidity()当前是否在DOM元素上显示validationMessage？

在无效字段中调用reportValidity() 会导致验证消息以依赖于浏览器的方式显示。 但是，再次调用 reportValidity() 会导致验证消息消失......

如何找到购买按钮的相对xpath

我想找到购买按钮的xpath。我使用通过 Chrome 进行复制来创建路径，但它们无法在我需要它们工作的网站的每个页面上工作。 我需要一条这样的路径...

使用 Javascript 选择 DOM 元素

我有以下 HTML 和 Javascript 片段。 在 Javascript 中，我引用了按钮元素 我想从中获取对第一个元素的引用 “证明”类的我...

onevent 和 addEventListener 的区别

我正在学习一些 DOM 事件，并尝试在 HTML 主体上使用“模糊”事件。 首先使用 onblur document.body.onblur = () => { 做一点事（）; } 并使用 AddEventListener 文档...

从函数更改 DOM 时遇到问题

感谢您的点击。 我是 JS 新手，喜欢闲逛以取乐，但我无法让这个功能正常工作。我已经用谷歌浏览器警报（'不正确'）对其进行了测试；它有效...

我正在尝试对输入的文件运行删除功能，但没有任何效果

我目前正在为我的 NFT 市场制作前端，并为我的铸币页面创建功能。我创建了一个更新文件元素，允许用户将图像上传到框中

有没有办法在 JavaScript 中获取网页中所有段落或标题的引用？

我正在编写一个简单的 Greasemonkey 脚本来删除网页中的所有图像、标题和段落（这是因为有人想使用几个流行网站的图像和图像）

如何将innerHTML字符串修剪为其中的特定元素？

我想知道如何将innerHTML字符串获取到元素内的特定元素。 例子 ： 这是一个段落... 我想知道如何将 innerHTML 字符串获取到元素内的特定元素。 示例： <div id="common-name"> <p id="P1">This is a paragraph 1.</p> <p id="P2" >This is a paragraph 2 .</p> <p id="P3">This is a paragraph 3.</p> </div> 假设我们希望它达到具有 id: P2 的元素，因此作为 string 输出将类似于 : <div id="common-name"><p id="P1">This is a paragraph 1.</p> （此外，如果存在任何实现，如果元素没有 ID，而是将 ref 作为 JavaScript 中的对象，则可以完成该操作。 我尝试将 innerHTML 内容作为字符串获取，但不知道如何获取元素后的其余文本，以便我可以从原始字符串中减去它以获得相同的输出。 这是我想出的一个解决方案，用于使用 for 循环隐藏多个元素。 我使这段代码可重用并且易于放入当前代码中。 //Is an array of all elements in div let container = document.querySelector("#container").children; //'i' = 1 so we don't hide the first element. for (let i = 1; i < container.length; i++) { container[i].style.display = "none"; //hiding elements console.log("Element: " + Math(i + 1); //Logging data } <div id="container"> <p id="P1">This is a paragraph 1.</p> <p id="P2">This is a paragraph 2 .</p> <p id="P3">This is a paragraph 3.</p> </div> 希望这有帮助:) 如果有的话请投票。

创建 DOM 元素 - 未捕获类型错误：无法读取 null 的属性（读取“appendChild”）

我正在尝试从 JS 脚本动态附加一个 div 元素到 HTML DOM 中，例如： ...

事件监听器中何时不会调用回调？

我写了以下代码： 设置超时（（）=> { document.body.innerHTML = "<div></div>"; 让outerHost = document.querySelectorAll("div")[0]; 外部主机。</desc> <question vote="1"> <p>我写了以下代码：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;script&gt; setTimeout(() =&gt; { document.body.innerHTML = &#34;&lt;div&gt;&lt;/div&gt;&#34;; let outerHost = document.querySelectorAll(&#34;div&#34;)[0]; outerHost.attachShadow({mode: &#34;open&#34;}); outerHost.shadowRoot.innerHTML = &#34;&lt;style&gt;div {width: 100px; height: 100px; background-color: red}&lt;/style&gt;&lt;div&gt;&lt;/div&gt;&lt;div id=&#39;host-shadow&#39;&gt;&lt;/div&gt;&#34;; let target = outerHost.shadowRoot.childNodes[2]; target.attachShadow({mode: &#34;open&#34;}); target.shadowRoot.innerHTML = &#34;&lt;div id=&#39;node-text&#39; style=&#39;background-color: green&#39;&gt;Hello&lt;/div&gt;&#34;; let relatedTarget = target.shadowRoot.childNodes[0]; let ev = new Event(&#34;mouseover&#34;); ev.relatedTarget = relatedTarget; target.addEventListener(&#34;mouseover&#34;, (e) =&gt; console.log(e.target, e.relatedTarget)); target.dispatchEvent(ev); }); &lt;/script&gt;</code></pre> </div> </div> <p></p> <p>它创建两个影子根并指定事件监听器<pre><code>id=&#34;host-shadow&#34;</code></pre>。<pre> </pre>如果我将光标放在 </p><code>mouseover</code><p> 上，然后将其移动到 <pre><code>id=&#34;node-text&#34;</code></pre>，我将不会调用事件侦听器的回调。但是如果我通过合成方法执行此操作，我会得到回调调用。我被困住了！<pre> </pre>查看</p>规格<p>：<a href="https://dom.spec.whatwg.org/#concept-event-dispatch" rel="nofollow noreferrer"> </a> </p>如果目标不是相关目标或目标是事件的相关目标，则：<blockquote> <p> </p>如果这个条件通过检查，那么你就会得到回调调用，否则你不会。</blockquote> <p>我可以比较非合成调用和合成，它们的调用没有通过检查。为什么合成调用会传递并调用回调？</p> <p></p>我的问题：<p>我上面指定的这个条件实际上是什么？<strong> </strong> </p> </question>您似乎假设可以通过在实例对象上设置具有该名称的属性来设置 <answer tick="false" vote="0"><code>id=&#34;host-shadow&#34;</code><p> 的 <pre><code>Event</code></pre> 。事实并非如此。您引用的规范中的 <pre><code>relatedTarget</code></pre> 是实例的内部属性，它不会暴露给 JS。目前它在规范中的名称是这样的，但明天可能会更改为另一个名称，而不会产生任何后果，因为它没有公开。<pre> </pre>要使属性产生影响，需要将其公开为接口上的设置器。目前 </p><p><code>relatedTarget</code><a href="https://dom.spec.whatwg.org/#event" rel="nofollow noreferrer"> 接口<pre> 仅将 </pre><code>Event</code></a> 和 <pre><code>cancelBubble</code></pre> 属性公开为可设置。所有其他属性都是<pre>readonly</pre>。你可以通过构造函数调用设置更多一些属性，如<em><code>returnValue</code></em>、<pre><code>.type</code></pre>、<pre><code>.bubbles</code></pre>和<pre><code>.cancelable</code></pre>，对<pre><code>.composed</code></pre>的调用将确定<pre><code>dispatchEvent()</code></pre>和<pre><code>.target</code></pre>其中之一，但是<pre><code>.timestamp</code> </pre> 根本不属于此列表，您无法对其进行设置。<pre> </pre>现在，</p><p><code>relatedTarget</code><a href="https://w3c.github.io/uievents/#dom-mouseevent-relatedtarget" rel="nofollow noreferrer">接口<pre>确实通过</pre>readonly</a><pre><code>MouseEvent</code></pre>属性暴露了其内部<em><code>relatedTarget</code></em>，并且它允许通过<pre>MouseEventInit字典</pre>的同名属性来设置它。所以对于<a href="https://w3c.github.io/uievents/#idl-mouseeventinit" rel="nofollow noreferrer"><code>.relatedTarget</code></a>，你实际上可以设置它。<pre> </pre>将其设置为您尝试执行的操作，回调将不会被调用，因为“</p>retargeting<p>事件的<a href="https://dom.spec.whatwg.org/#retarget" rel="nofollow noreferrer"><code>MosueEvent</code></a>针对<pre><code>relatedTarget</code></pre>的结果”将是<pre><code>target</code></pre>（我们击中了算法中的第三个子弹，因此直接返回<pre><code>target</code></pre>，即<pre><code>A</code></pre>），但事件的<pre><code>target</code></pre>（我们设置的）不是<pre><code>relatedTarget</code></pre>。<pre> </pre></p><p> </p> <div data-babel="false" data-lang="js" data-hide="false" data-console="true"><code>target</code><div> <pre> </pre> </div></div> <p> </p></answer>

DevTools“子树修改中断”未在 github.com 上触发

分叉的 GitHub 存储库的网页显示诸如“此分支落后 10 次提交”之类的信息。过去是静态 HTML，但现在文本出现延迟。具体来说， 是

用js构造一个html<math>元素并不能使其正确渲染

元素在手写时按预期工作，但在使用js动态创建时无法正确渲染： 让 math = document.createElement('math'); math.setAttribute('显示...

使用react-router-dom添加额外页面

目前，我只有一个主页（/）。现在，我想添加带有另一个路径（/about）的附加页面，因此我尝试包含反应路由器。 当我在 index.js 中执行此操作时，它有效： 常量 H...

ReferenceError：文档未定义（反应路由）

当我在index.js中执行此操作时，它有效： 常量主页 = () => { 返回 （ ）； }; 导出默认首页； 但是当我这样做时： 从 './HomePage' 导入主页；