dom 相关问题

我只想在条件满足/有效时选择一个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()

javascript html dom xpath

回答 1 投票 0

DOCTYPE 是 HTML 标签的父级吗？

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

python html dom

回答 2 投票 0

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

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

javascript html dom safari client-side-validation

回答 1 投票 0

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

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

javascript html dom xpath css-selectors

回答 1 投票 0

使用 Javascript 选择 DOM 元素

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

javascript dom

回答 2 投票 0

onevent 和 addEventListener 的区别

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

javascript html dom

回答 1 投票 0

从函数更改 DOM 时遇到问题

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

javascript html dom

回答 1 投票 0

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

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

javascript html dom removechild

回答 1 投票 0

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

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

javascript dom

回答 3 投票 0

如何将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> 希望这有帮助:) 如果有的话请投票。

javascript html dom dom-manipulation

回答 1 投票 0

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

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

javascript html dom

回答 1 投票 0

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

我写了以下代码：设置超时（（）=> { 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><script> setTimeout(() => { document.body.innerHTML = "<div></div>"; let outerHost = document.querySelectorAll("div")[0]; outerHost.attachShadow({mode: "open"}); outerHost.shadowRoot.innerHTML = "<style>div {width: 100px; height: 100px; background-color: red}</style><div></div><div id='host-shadow'></div>"; let target = outerHost.shadowRoot.childNodes[2]; target.attachShadow({mode: "open"}); target.shadowRoot.innerHTML = "<div id='node-text' style='background-color: green'>Hello</div>"; let relatedTarget = target.shadowRoot.childNodes[0]; let ev = new Event("mouseover"); ev.relatedTarget = relatedTarget; target.addEventListener("mouseover", (e) => console.log(e.target, e.relatedTarget)); target.dispatchEvent(ev); }); </script></code></pre> </div> </div> <p></p> <p>它创建两个影子根并指定事件监听器<pre><code>id="host-shadow"</code></pre>。<pre> </pre>如果我将光标放在 </p><code>mouseover</code><p> 上，然后将其移动到 <pre><code>id="node-text"</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="host-shadow"</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>

javascript html dom dom-events shadow-dom

回答 0 投票 0

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

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

javascript dom google-chrome-devtools firefox-developer-tools

回答 1 投票 0

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

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

javascript html dom mathml

回答 1 投票 0

dom 相关问题

最新问题