dom 相关问题

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

div#PageContainer > div.container-AD > div:nth-child(4) > div > div.collection__content > div.collection__products.td-collection__products.collection__products-- Three.td-sticky-

javascript dom

回答 1 投票 0

单击标签内的按钮不会触发相应的输入

我试图通过隐藏复选框并在其父标签内添加一个按钮来更改复选框的样式，如下所示：我正在尝试通过隐藏它并在其父标签内添加一个按钮来更改 checkbox 的样式，如下所示： <label onclick="console.log('label received click event')"> <input type="checkbox" style="display: none" onchange="console.log('input value changed')"> <button type="button">click here</button> </label> 但是点击按钮并不会触发输入。如果我使用 div 而不是 button，则此设置有效： <label onclick="console.log('label received click event')"> <input type="checkbox" style="display: none" onchange="console.log('input value changed')"> <div>click here</div> </label> 这是预期的，并且也与标签文档匹配。我不明白的是，在这两种情况下， click 事件都会冒泡到标签，因此标签会收到单击事件。与 div 或其他元素不同的按钮有什么特别之处？有没有办法让它发挥作用？ PS：我也尝试在event.preventDefault()上做一个button，但它没有改变任何东西。无论行为如何，请勿在标签中包含多个元素。按钮当然不需要标签，如果你这样做，你的代码就会简单得多 <label><input type="checkbox" style="display: none" onchange="console.log('input value changed')">Label for checkbox</label> 如果您想将按钮样式设置为复选框，您可以这样做创建 CSS 外观，使按钮充当复选框

html dom

回答 1 投票 0

JavaScript 检测是否启用硬件加速

是否可以检测浏览器是否支持硬件加速页面渲染以及是否已启用？我知道 Firefox 4、IE9 和 Chrome 支持...

javascript css dom hardware-acceleration browser-feature-detection

回答 3 投票 0

删除div而不删除普通Javascript中的内容[重复]

有人可以帮助我如何删除 div 标签而不删除 JavaScript 中的内容吗？这是我的 html，我需要从中删除所有 div 标签： ... 任何人都可以帮助我如何删除 div 标签而不删除 JavaScript 中的内容吗？这是我的 html，我需要从中删除所有 div 标签： <div id="id1" class="someclass"> <p>some text <label> Test content </label> </p> <div id="id2" style="overfolw:scroll"> <span>some text</span> <div id="level3"> <label> Test content </label> <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a> </div> </div> </div> 预期输出如下所示。 <p>some text <label> Test content </label> </p> <span>some text</span> <label> Test content </label> <a href=https://twitter.com/realDonaldTrump/status/882186896285282304 target=_blank rel=noopener>creepiness</a> 使用纯java脚本： var divs=document.getElementsByTagName('div'); var counter = divs.length-1; for(i=counter;i>=0;i--){ divs[i].outerHTML = divs[i].innerHTML; } <div id="id1" class="someclass"> <p>some text <label> Test content </label> </p> <div id="id2" style="overfolw:scroll"> <span>some text</span> <div id="level3"> <label> Test content </label> <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a> </div> </div> </div> 使用 jQuery unwrap(): $(document).ready(function(){ $('div').contents().unwrap(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="id1" class="someclass"> <p>some text <label> Test content </label> </p> <div id="id2" style="overfolw:scroll"> <span>some text</span> <div id="level3"> <label> Test content </label> <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a> </div> </div> </div> 使用尖端技术，例如可迭代节点列表和replaceWith，使用普通的 DOM API 非常简单： for (const div of document.querySelectorAll("div")) // alternatively: Array.from(document.getElementsByTagName("div")) div.replaceWith(...div.childNodes); 您可以使用unwrap功能。 $('div').children().unwrap(); 如果你想用纯 JavaScript 来做。您可以使用 document.getElementsByTagName("div") 获取所有 div 的列表，但您需要以相反的顺序解开这些 div。这是一个 nodelist，因此 reverse() 对其不起作用，因此您可以首先对其使用 [].slice.call()，它会为您提供一个数组，然后您可以反转它。然后在数组中解开每个元素。你可以这样做： var elements = [].slice.call(document.getElementsByTagName("div"), 0).reverse(); elements.forEach(function(el){ el.outerHTML = el.innerHTML; }); <div id="id1" class="someclass"> <p>some text <label> Test content </label> </p> <div id="id2" style="overfolw:scroll"> <span>some text</span> <div id="level3"> <label> Test content </label> <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a> </div> </div> </div>

javascript jquery html dom

回答 3 投票 0

使用 JavaScript 查找父元素的子元素

最有效的方法是仅使用纯 JavaScript 查找特定父元素的子元素（带有类或 ID）。没有 jQuery 或其他框架。在这种情况下，我会...

javascript dom

回答 6 投票 0

angularjs ng-bind-html 到 iframe 正在渲染 <html> 标签之外的 HTML

我正在将页面从 $http.get 加载到 iFrame 中。 $http.get 检索完整的 HTML 页面，就好像它是本机导航到的一样，但是当我将内容附加到 iframe 时，内容是

javascript angularjs dom iframe xmlhttprequest

回答 1 投票 0

如何在浏览器JavaScript中实现“复制到剪贴板”？

如何用JavaScript实现“复制到剪贴板”？有没有办法在 HTML 中添加 JS 脚本，允许“复制到剪贴板”按钮？下图中的示例。什...

javascript dom

回答 2 投票 0

每次浏览器重新加载时“clientwidth”都会发生变化

嗨，我不懂javascript，但我可以理解它，我想构建一个轮播，所以我尝试使用“clientwidth”访问元素的宽度，但我得到的宽度...

javascript dom browser render dom-manipulation

回答 1 投票 0

获取Svelte中子组件的布局大小

我正在将 VanillaJS 网站转换为 Svelte，需要在网页上随机放置 div。请注意，每个 div 大小都可以根据其内容而变化，它们不能...

css dom svelte svelte-component

回答 1 投票 0

HTML 中 `table > tbody:nth-child(1)` 的消失

这是一个简单的 HTML 表格，我想选择唯一的元素。 ... 这是一个简单的 HTML 表格，我想选择唯一的 <tbody> 元素。 <table> <thead> <tr> <td>Team</td> <td>Points</td> </tr> </thead> <tbody> <tr> <td>A</td> <td>15</td> </tr> <tr> <td>B</td> <td>21</td> </tr> </tbody> </table> 由于只有一个<tbody>，我以为可以用:nth-child(1)来获取，但是失败了。 > document.querySelectorAll('table > tbody').length /* It worked */ < 1 > document.querySelectorAll('table > tbody:nth-child(1)').length /* It failed */ < 0 > document.querySelectorAll('table > tbody:nth-child(2)').length /* It worked */ < 1 为什么tbody:nth-child(1)不存在，而tbody:nth-child(2)却存在？为什么 tbody:nth-child(1) 不存在，而 tbody:nth-child(2) 却存在？ tbody 元素是 table 元素的 second 子元素，因此 :nth-child(1) 不起作用，因为它不是第一个子元素，但 :nth-child(2) 起作用，因为它是第二个子元素。另一种选择是使用 tbody:nth-of-type(1)，因为 tbody 元素是该类型元素中的第一个（也是唯一一个）。团队

html css dom

回答 1 投票 0

更改组件中二维码的内容

我正在使用 ngx-qrcode2 在我的 Angular 应用程序中生成 QR 码。我需要做的是将一组二维码附加到 PDF 中并下载该文件。我更改了 Compo 中 QR 的内容...

javascript angular typescript dom qr-code

回答 1 投票 0

在 JavaScript 中的同一范围内使用“event”关键字两次？

我有一个通过单击事件侦听器调用的函数。它接受一个事件参数：函数 editExistingEmp(事件) 该函数在调用时将循环遍历所有 DOM 内容...

javascript dom electron event-handling

回答 1 投票 0

使用AppleScript在Brave设置页面上运行JS

我正在尝试解决 Brave 对扩展白/黑名单的限制。我有两个相互冲突的扩展 - 一个我想在工作网站上运行，另一个几乎在其他所有东西上运行（我...

javascript dom applescript

回答 1 投票 0

如何将使用 getElementsByClassName 返回的 HTMLcollection 转换为 Array

Array.from() 或 Array.prototype.slice.call() 或使用 for 循环将 htmlcollection 添加到数组中无法将 HTMLcollection 从 getElementsByClassName 转换为数组，以便我可以迭代

javascript arrays dom htmlcollection

回答 1 投票 0

为什么我的 JavaScript 仍然先于 HTML 加载？

我已经尝试了所有推荐的解决方案：将我的脚本移到元素之后；在关闭标签之前插入；将我所有的 JS 代码包装在 document.addEventListener("

javascript html dom

回答 1 投票 0

为什么appendChild()会让一些孩子失踪？

const div1 = document.createElement('div'), div2 = document.createElement('div') div1.innerHTML = 'x' div1.childNodes.forEach(子=> { // 文本节点 x 丢失控制台.l...

javascript dom browser

回答 1 投票 0

使用 EJS 添加部分模板时的空格

我正在使用 SailsJS 和 EJS 引擎。当我使用 <% include partials/template.ejs %> 或 <% partial('partials/template.ejs') in the layout file, I get whitespaces before the comp...

node.js dom express sails.js ejs

回答 4 投票 0

如何打印数组中数字重复的次数？ JS

我正在尝试解决这个练习：编写一段 JavaScript 代码，要求用户输入一个数字，然后打印该数字在数组中出现的次数。我正在用 parseFloat 来做，所以我可以...

javascript arrays function for-loop dom

回答 1 投票 0

在Web Worker中，如何从字符串中查找html属性？

在网络工作者内部，我有一个 html 字符串，例如： “” 有没有我可以轻松导入的库

javascript dom web-worker

回答 2 投票 0

如何检查文本内容的显示：无样式

我想获取 DOM 节点的文本内容，但没有有效隐藏的元素（具有样式显示：无）。我了解 DOM textContent 属性和 jQuery 的 text() 方法（我...