dom 相关问题

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

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

javascript dom

回答 3 投票 0

我想知道如何将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

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

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

javascript html reactjs dom nestjs

回答 2 投票 0

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

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

javascript html reactjs dom nestjs

回答 1 投票 0

jQuery：我可以在 not() 方法中遍历吗

我想在除当前容器之外的所有容器中使用特定类来处理所有其他 DOM 元素。我可以在 not 方法中遍历兄弟姐妹吗？示例代码结构（所有 div 都有一些

jquery css dom

回答 1 投票 0

如何根据变量隐藏元素？

数字=1 document.getElementById("Num").innerHTML = num //增加/减少num的按钮函数下一个（）{ 数字++ document.getElementById("Num").innerHTML = num } 函数之前（）{ 编号-- 文件。

javascript if-statement dom hide

回答 1 投票 0

找回孩子加起来

有没有办法只检索添加到特定点的子项。例如，我创建了矩形和圆形，并且在添加路径之前正在执行 fnTwo，希望它

javascript html svg dom

回答 1 投票 0

根据变量打开窗口

上一页下一个 <html> <body> <button onclick="previous()">previous</button> <button onclick="next()">next</button> <img src="https://th.bing.com/th/id/OIP.-d3JKGX5ZJ3Y3U7ybY8h8gHaE7?rs=1&pid=ImgDetMain" onclick="reDirect()"></img> <script> maxnum=4 num=0 function previous(){ if(num>0) { num++ } else{} } function next(){ if(num<maxnum){ num++ } else{} } function reDirect(){ if(num=0) { window.open("https://youtube.com"); } else{} } </script> </body> </html> 我想要一个函数来检查变量并根据变量重定向到另一个页面。这是需要的，因为我想要制作的整个脚本的图像也会根据变量而变化，如果没有制作图像的页面，该功能将毫无用处，所以我也希望它具有选择性。评论是对的，是==0问题。

javascript if-statement dom window.open

回答 1 投票 0

Web Audio API 中的播放按钮只能工作一次，如何使其多次工作？

我正在使用网络音频API，我遇到了这个问题描述：我正在开发一个简单的网页，该网页使用 Web Audio API 通过频率滑块和播放/停止按钮生成声音。

javascript html dom audio web-audio-api

回答 1 投票 0

Keyup 事件给出具有未定义属性的事件

我在文本区域上有一个“keyup”事件。当我尝试 console.log(ev) 时，我看到了一个正确的事件，但是当我尝试使用该事件的属性时，除了 isTrusted 属性（以及其他属性，例如 keycode

javascript dom

回答 1 投票 0

如何使用 selenium python 单击同意管理器（consentmanager.net）内的按钮？

我正在尝试在网站 https://diablochairs.com/en/ 上使用 Python 中的 Selenium 接受 cookie。我在这方面遇到困难，因为我找不到接受按钮。整个窗户都是