dom 相关问题

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， 类型：'百分比'， 渲染：函数（数据，...

DOM 是一个 API，还是 API 是 DOM 的一部分？

我读到 API 是用来操作 DOM 的，然后我在其他地方读到 DOM 是 API 的一个示例，那么 dom 和 api 是如何组合在一起的呢？

无法从存储在sessionStorage中的InnerHTML字符串段中提取ID

我的 html 页面脚本部分中的 teo 行是这些...... var mySession = sessionStorage.getItem("catProfile"); var myValue = mySession.getElementByID("catAge");