dom 相关问题

即使在 tic tac toe 游戏中轮到玩家二后，事件侦听器也会添加到玩家一

回合确实切换，新选择的点被添加到playerTwo数组中，但它也被添加到playerOne中。我已经移动了部分代码，但这并不能解决问题。 const 游戏板 = ((...

将 HTML 字符串附加到 DOM

如何附加 HTML 字符串，例如 var str = '这里只是一些文字'; 到带有 id 测试的 ？ （顺便说一句 div.innerHTML += str; 是不可接受的。） 如何附加 HTML 字符串，例如 var str = '<p>Just some <span>text</span> here</p>'; 到 id 为 <div> 的 test？ （顺便说一句div.innerHTML += str;是不可接受的。） 使用 insertAdjacentHTML 当前所有浏览器都支持: div.insertAdjacentHTML( 'beforeend', str ); 位置参数beforeend将添加到元素内部，在其最后一个子元素之后。 现场演示：http://jsfiddle.net/euQ5n/ 性能 AppendChild (E) 比 Chrome 和 Safari 上的其他解决方案快 2 倍以上，insertAdjacentHTML(F) 在 Firefox 上速度最快。 innerHTML= (B)（不要与 += (A) 混淆）是所有浏览器上第二快的解决方案，它比 E 和 F 方便得多。 详情 设置环境 (2019.07.10) Chrome 75.0.3770 (64 位)、Safari 11.1.0 (13604.5.6)、Firefox 67.0.0 (64 位) 上的 MacOs High Sierra 10.13.4 Chrome E（每秒 140k 操作）最快，B (47k) 和 F (46k) 次之，A (332) 最慢 在 Firefox 上 F (94k) 最快，然后是 B(80k)、D (73k)、E(64k)、C (21k) 最慢的是 A(466) 在 Safari 上 E(207k) 最快，然后是 B(89k)、F(88k)、D(83k)、C (25k)，最慢的是 A(509) 您可以在您的机器上重播测试这里 function A() { container.innerHTML += '<p>A: Just some <span>text</span> here</p>'; } function B() { container.innerHTML = '<p>B: Just some <span>text</span> here</p>'; } function C() { $('#container').append('<p>C: Just some <span>text</span> here</p>'); } function D() { var p = document.createElement("p"); p.innerHTML = 'D: Just some <span>text</span> here'; container.appendChild(p); } function E() { var p = document.createElement("p"); var s = document.createElement("span"); s.appendChild( document.createTextNode("text ") ); p.appendChild( document.createTextNode("E: Just some ") ); p.appendChild( s ); p.appendChild( document.createTextNode(" here") ); container.appendChild(p); } function F() { container.insertAdjacentHTML('beforeend', '<p>F: Just some <span>text</span> here</p>'); } A(); B(); C(); D(); E(); F();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> This snippet only for show code used in test (in jsperf.com) - it not perform test itself. <div id="container"></div> 这样可以接受吗？ var child = document.createElement('div'); child.innerHTML = str; child = child.firstChild; document.getElementById('test').appendChild(child); jsFiddle. 但是，尼尔的答案是一个更好的解决方案。 这个想法是在中间元素上使用 innerHTML，然后通过 appendChild 将其所有子节点移动到您真正想要的位置。 var target = document.getElementById('test'); var str = '<p>Just some <span>text</span> here</p>'; var temp = document.createElement('div'); temp.innerHTML = str; while (temp.firstChild) { target.appendChild(temp.firstChild); } 这可以避免清除 div#test 上的任何事件处理程序，但仍然允许您附加 HTML 字符串。 正确的方法是使用insertAdjacentHTML。在 Firefox 8 之前的版本中，如果您的 Range.createContextualFragment 不包含 str 标签，您可以回退到使用 script。 如果您的 str 包含 script 标签，则需要在插入片段之前从 script 返回的片段中删除 createContextualFragment 元素。否则，脚本将运行。 （insertAdjacentHTML 标记脚本不可执行。） 快速破解： <script> document.children[0].innerHTML="<h1>QUICK_HACK</h1>"; </script> 用例： 1：另存为.html文件并在chrome或firefox或edge中运行。 （IE不能用） 2：在http://js.do中使用 实际行动： http://js.do/HeavyMetalCookies/quick_hack 细分评论： <script> //: The message "QUICK_HACK" //: wrapped in a header #1 tag. var text = "<h1>QUICK_HACK</h1>"; //: It's a quick hack, so I don't //: care where it goes on the document, //: just as long as I can see it. //: Since I am doing this quick hack in //: an empty file or scratchpad, //: it should be visible. var child = document.children[0]; //: Set the html content of your child //: to the message you want to see on screen. child.innerHTML = text; </script> 我发帖的原因： JS.do 有两个必备条件： 没有自动完成功能 垂直显示器友好 但不显示console.log消息。 来到这里寻找快速解决方案。 我只想看看结果 几行暂存器代码， 其他解决方案的工作量太大。 这个可以解决 document.getElementById("list-input-email").insertAdjacentHTML('beforeend', '<div class=""><input type="text" name="" value="" class="" /></div>'); InnerHTML 清除现有节点的所有数据，例如事件 使用firstChild附加子项仅将第一个子项添加到innerHTML。例如，如果我们必须附加： <p>text1</p><p>text2</p> 仅显示text1 这个怎么样： 通过附加子项将特殊标签添加到innerHTML，然后通过删除我们创建的标签来编辑outerHTML。不知道它有多聪明，但它对我有用 或者您可以将outerHTML更改为innerHTML，这样就不必使用函数replace function append(element, str) { var child = document.createElement('someshittyuniquetag'); child.innerHTML = str; element.appendChild(child); child.outerHTML = child.outerHTML.replace(/<\/?someshittyuniquetag>/, ''); // or Even child.outerHTML = child.innerHTML }<div id="testit"> This text is inside the div <button onclick="append(document.getElementById('testit'), '<button>dadasasdas</button>')">To div</button> <button onclick="append(this, 'some text')">to this</button> </div> 为什么不可接受？ document.getElementById('test').innerHTML += str 将是教科书式的做法。 最短 - 18 个字符（不要混淆 +=（OP 提及）与 = 更多详细信息此处） test.innerHTML=str var str = '<p>Just some <span>text</span> here</p>'; test.innerHTML=str<div id="test"></div> 我的问题的答案就是这样；一个带有空值的简单 Map；我所能得到的只是一个非常沉重且不精确的答案。我想知道谁结束了我的问题...甚至懒得阅读 "use strict" try { const fruits = new Map([["Banana",""],["Apples", ""], ["Orange"," "]]); let text = "<h1>Fruits</h1>" + "<ul>"; fruits.forEach(function(value, key){ text += "<li>" + key + value + "<br>" + "</li>" }); text +="</li> "; document.getElementById('demo').innerHTML = text; } catch(err){ document.getElementById('theError').innerHTML = err; }

ref.current 在 useEffect

我有一个正在转发到子组件的引用列表。它们似乎工作得很好，因为我可以用它们进行操作作为对用户操作的反馈（在这种情况下，它滚动到 vi...

如何优化导致大型数据集速度变慢的 jQuery DOM 操作脚本的性能？

我可以应用任何其他优化技术或最佳实践来提高此脚本的性能吗？ 代码片段： // 简化示例 $('#table-body').empty(); data.forEach(func...

为什么el.scrollIntoView()会导致整个容器移动？

我嵌套了overflow-y：auto元素，整个页面可滚动，侧边栏可独立滚动。当我将鼠标悬停在主要内容区域中的某些内容上时，我想要侧面...

如何访问 Windows 文档上的 Google Analytics 4 属性？

我知道如果查看页面，Google Analytics 4 中有一个中等属性，如下所示 我可以在浏览器中访问 DOM 或 Windows 文档上的该媒体吗？我的意思是我可以访问页面引用器

如何找到给定片段标识符所针对的元素？

当浏览器导航到像 http://example.com/#foo 这样的 URL 时，它会滚动到 #foo 标识的元素； URI 的这个元素称为片段标识符。 假设我有一个片段

以编程方式从 <template> HTML

我想基于 DOM 中的 元素实例化一个 Web 组件，使用 JS 设置 2 个槽值标题和文本。 模板 HTML &l... 我想基于 DOM 中的 <template> 元素实例化一个 Web 组件，使用 JS 设置 2 个槽值 title 和 text。 HTML 模板 <template id="tiddler-display"> <div class="tiddler"> <h1><slot name="title">TITLE</slot></h1> <p><slot name="text">TEXT</slot></p> </div> </template> 如何将“foo”和“bar”插入文本/图块插槽？ customElements.define( 'tiddler-display', class extends HTMLElement { constructor() { super(); let template = document.getElementById('tiddler-display'); let templateContent = template.content; const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(templateContent.cloneNode(true)); } }, ); // Instantiate let newElement = document.createElement('tiddler-display'); // How to insert 'foo' and 'bar' into the text/tile slots? newElement.shadowRoot.querySelectorAll('slot')[0].innerHTML = 'foo'; // This cannot be the best way 👆 TL；博士：https://jsfiddle.net/zL8gapn2/15/ 嗨， 您所做的工作正常，但是如果您有很多插槽并且想要重用模板，那么它可能会有点长...... 我为此使用字符串模板： 你可以做的是创建一个适合你的模板的js对象 var jsobject = { text:'foo', title:'bar'} <template id="tiddler-display"> <div class="tiddler"> <h1><slot name="title">${this.title}</slot></h1> <p><slot name="text">${this.text}</slot></p> </div> </template> 你可以在模板中获取html let template = document.getElementById('tiddler-display'); let templateContent = template.innerHTML; 然后创建一个 Function 对象，并通过提供 js 对象来调用它 let fillTemplate = new Function("return `" + templateContent + "`;"); let instanceContent = fillTemplate.call(jsobject); let instance = document.createElement("div"); instance.innerHTML = instanceContent; document.body.appendChild(instance); 我最近使用了一些模板，这就是我的工作方式。

Backbone 事件未绑定到 dom 元素

我的观点之一是： 事件：{ '点击.tab': 'doSomething', }, 然后： 做某事：函数（）{ ... }, 在我看来，这是一个反复出现的结构，但由于某种原因，“doSomething”

Selection.modify 如何在 Chrome 中实现“行”粒度？

这是一个简化的内容可编辑编辑器，包含两行文本： 让按钮= document.querySelector(“按钮”); button.addEventListener("点击", 修改); 函数修改（）{ 让选择=

“剪切和粘贴” - 使用 Javascript 移动 DOM 中的节点

我的html代码大致如下： 一些html 也许还有更多 我的 html 代码大致如下所示： <div id="id1"> <div id="id2"> <p>some html</p> <span>maybe some more</span> </div> <div id="id3"> <p>different text here</p> <input type="text"> <span>maybe even a form item</span> </div> </div> 显然还有更多内容，但这就是基本思想。我需要做的是交换#id2和#id3的位置，所以结果是： <div id="id1"> <div id="id3">...</div> <div id="id2">...</div> </div> 有谁知道有一个函数（我确定我不是第一个需要此功能的人）可以读取和写入两个节点（及其所有子节点）以便交换它们在 DOM 中的位置？ 在这种情况下 document.getElementById('id1').appendChild(document.getElementById('id2')); 应该可以解决问题。 更一般地，您可以使用 insertBefore()。 此函数接受传递给它的任何节点，并用给定的标签将其包装起来。在示例代码片段中，我用部分标签包裹了一个跨度标签。 function wrap(node, tag) { node.parentNode.insertBefore(document.createElement(tag), node); node.previousElementSibling.appendChild(node); } function wrap(node, tag) { node.parentNode.insertBefore(document.createElement(tag), node); node.previousElementSibling.appendChild(node); } let toWrap = document.querySelector("#hi"); wrap(toWrap, "section"); console.log(document.querySelector("section > #hi"), " section wrapped element"); <span id="hi">hello there!</span> 您可以使用 insertAdjacentElement 而不是 appendChild 可以更好地控制元素相对于目标元素的位置。 语法：targetElement.insertAdjacentElement(position, element)。 它有四个位置代码： 'beforebegin'：在 targetElement 本身之前。 'afterbegin'：就在 targetElement 内部，在其第一个子元素之前。 'beforeend'：就在 targetElement 内部，在其最后一个子元素之后。 'afterend'：在 targetElement 本身之后。 它显示为： //beforebegin <p> //afterbegin foo //beforeend </p> //afterend 根据您的情况，您可以将代码编写为： document.getElementById('id2').insertAdjacentElement('beforebegin', document.getElementById('id3')); 请注意，这样，您不需要引用父（容器）元素！ 还要考虑您拥有比 id2、id3 更多的元素，例如：id4、id5、id6。现在，如果您想在 id2 之后重新定位例如 id5，则很简单： function changePosition() { document.getElementById('id2').insertAdjacentElement('afterend', document.getElementById('id5')); } <div id='container'> <div id='id1'>id1</div> <div id='id2'><u>id2</u></div> <div id='id3'>id3</div> <div id='id4'>id4</div> <div id='id5'><b>id5</b></div> <div id='id6'>id6</div> </div> <p><input type='button' onclick="changePosition()" value="change position"></p> 我认为值得补充的是，如果您只需要视觉上的更改（DOM 将保持不变，但我将在 UI 中更改），您可以使用 CSS order 属性。 像其他答案一样在 DOM 上工作可能更有效，尽管同样并没有真正改变 DOM 结构，所以当然不是这个问题的真正答案。 示例： document.addEventListener("DOMContentLoaded", function () { const btnEl = document.getElementById('btn-swap'); const elToSwap = document.getElementById('id2'); btnEl.addEventListener('click', e => { elToSwap.classList.toggle("first"); }); }); .container { display: flex; flex-direction: column; } .first { order: -1; } <div class="container"> <div id="id1">first DIV</div> <div id="id2">second DIV</div> </div> <button id="btn-swap">swap divs</button> 短 我只是将按钮（在底部）和js添加到你的html中 id3.after(id2); function swap() { id3.after(id2); } <div id="id1"> <div id="id2"> <p>some html</p> <span>maybe some more</span> </div> <div id="id3"> <p>different text here</p> <input type="text"> <span>maybe even a form item</span> </div> </div> <button onclick="swap()">swap</button>

从节点获取 XPath 位置谓词

有没有办法从节点的某个实例获取 XPath 位置谓词？ 所以我搜索了一个position(Node)函数，它返回DOM树中节点的位置。 示例：页面...

等待元素重新渲染

看这段代码： document.querySelector(":root").style.setProperty("--image-size", "100px"); console.log(document.querySelector("#item").offsetHeight...

内容脚本 – 页面加载完成后访问 DOM 后返回“Null”值的函数

目标 - 我正在构建一个 Chrome 扩展程序。一旦页面和所有 DOM 元素加载完毕，我需要从特定网页访问 DOM 元素。 Index.html – 我正在访问的页面 目标 - 我正在构建一个 Chrome 扩展程序。一旦页面和所有 DOM 元素加载完毕，我需要从特定网页访问 DOM 元素。 Index.html – 我正在访问的页面 <div class="db">some text</div> 当前行为 – 我的函数返回 Null 预期行为 – 页面完成加载后，我希望在控制台中看到以下内容 <div class="db">some text</div> Contentscript.js – 下面是页面加载后运行的脚本 window.addEventListener('load', getWorkspaceDetails); function getWorkspaceDetails() { let workspaceName = document.querySelector('.db'); console.log(workspaceName); }; 以下是控制台记录预期 DOM 元素的唯一情况 setTimeout(() => { let workspaceName = document.querySelector('.db'); console.log(workspaceName); }; }, 5000); 感觉查询不尊重页面加载，因此查询失败。我不想使用setTimeout。如何确保 window.addEventListener() 按预期工作？ 这是因为“目标”元素在窗口完全加载后加载。 为此，您可以使用 MutationObserver 来监视 DOM 中的变化，并在检测到“目标”元素时执行该函数。 这样，您可以避免 setTimeout 并确保该函数在元素可用时立即运行： const target = '.db'; const observer = new MutationObserver((mutationsList, observer) => { if (document.querySelector(target)) { getWorkspaceDetails(); observer.disconnect(); } }); observer.observe(document.body, { childList: true, subtree: true }); function getWorkspaceDetails() { let workspaceName = document.querySelector(target); console.log(workspaceName); } // Initial check in case the element is already present if (document.querySelector(target)) { getWorkspaceDetails(); observer.disconnect(); }

我只想显示/隐藏我的 div，但我的变量有问题。有什么想法吗？

我正在为编码课程制作一个迷你项目，其中包含一系列诗歌。我将诗歌设置在 div 中，并将 div 设置在一个部分中（根据建议），并且我想切换诗歌的文本和图像，以便...

Next JS Zego 云中未定义文档

我一直在我的下一个js应用程序中实现zego cloud，它抛出错误，显示文档未定义 我正在我的下一个 js 应用程序中使用“使用客户端”来访问 React ho...

JavaScript 在页面上运行，但最终删除了自己的 DOM 节点。我如何测试它做了什么？

一个场景， 我在 DOM 中有一个脚本元素 该脚本在页面上执行了“操作”，然后自行删除 (</desc> <question vote="3"> <p>一个场景，</p> <p>我在 DOM 中有一个脚本元素</p> <p>这个脚本在页面上做了“事情”，然后它<strong>删除了自己</strong></p> <pre><code>&lt;script type=&#34;text/javascript&#34; id=&#34;the-javascript&#34;&gt; (function (d){ var ..., script = d.getElementById(&#39;the-javascript&#39;), ...; // lotsa code !! script.parentNode.removeChild(script); }(document)); &lt;/script&gt; </code></pre> <p>这是一个匿名 IIFE（立即调用函数执行）<br/> 我怎么知道JavaScript在页面上被执行了。陷入了我必须找到的场景。</p> <p>除了<pre><code>view-source</code></pre>还有什么吗？</p> <p>我正在运行一个测试用例，需要查找 JavaScript 是否在页面上运行<br/> 我知道开发者工具的使用。呃！ <pre><code>code</code></pre> 位于 <pre><code>script</code></pre> 标签中，代码删除了 <pre><code>script</code></pre> 标签<br/> 该代码是匿名的，因此我无法在控制台或任何地方检查全局变量<br/> 我必须找出 JavaScript 是否创建了任何 DOM 元素，而不使用 <pre><code>view-source</code></pre></p> </question> <answer tick="true" vote="2"> <blockquote> <p><em>“我的一行问题是 - “如果 JavaScript 代码自行删除，我如何找到该代码已在页面上执行”。”</em></p> </blockquote> <p>如果脚本从 DOM 中删除了自身，则<em>无法</em>找到它...因为它不存在...因为它已被删除。</p> <hr/> <p>为了解决更新的问题和评论，除了对页面发出 XHR 请求并分析收到的内容之外，实际上没有任何方法可以安全地检测脚本是否运行然后自行删除。</p> <p>你可以搜索代码的副作用，但可能性实在是太大了，有可能是脚本没有可见的副作用。</p> </answer> <answer tick="false" vote="2"> <p>Chrome 或 IE 等浏览器具有开发人员工具，可以告诉您（几乎）有关页面的所有信息。只需激活工具并观察页面加载即可。</p> <p>如果您想知道脚本的作用，您也可以导航到其地址：<pre><code>http://theirSite/main.js</code></pre></p> <p>注意：脚本并没有删除自身，它只是删除了加载它的节点。</p> </answer> </body></html>

获取 iframe 的当前位置/url 并分配给变量

我在自己的服务器上托管了一些内容，我动态地向用户显示这些内容。然而，内容有几层深，我需要 iframe 的 url/位置，以便我可以将其分配给...

如何使用 Excel VBA 从浏览器下载 pdf 文件

我正在使用下面的代码片段从网站下载 PDF 文件。 选项显式 私有声明函数 URLDownloadToFile Lib“urlmon”别名“URLDownloadToFileA”_ （作者：Val pCaller A...

Datatable-如何每次从渲染的 html 元素中按不同的值对一列进行自定义排序

我们假设数据表的单元格呈现如下： 列定义：[ { 目标：0， 类型：'百分比'， 渲染：函数（数据，...