- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将 DOM 树扁平化为 Array
。结果应包括根作为第一个条目。首选纯 JS 解决方案。实现这一目标的最快方法是什么?
HTML结构示例:
<div class="tested-root">
<span></span>
<span></span>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</div>
预期的输出是:[div.tested-root, span, span, div, span, span, div, span, span]
或类似的(这个是DFS,但为了这个问题并不重要) .
从以下三种方法中哪个最快:
querySelectorAll
节点迭代器
树行者
最佳答案
我最近才来尝试其他一些。下面是从最慢到最快的结果,同时指定一个比最快的慢。
Chrome based results. Safari shows roughly the same numbers. Firefox has issues with that perf app and was not verified.
const list = Array.from(root.querySelectorAll('*'));
list.unshift(root);
const list = [root, ...root.querySelectorAll('*')];
const list = [];
const ni = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT);
let next;
while (next = ni.nextNode()) {
list.push(next);
}
const list = [root];
const tw = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
let next;
while (next = tw.nextNode()) {
list.push(next);
}
const list = [root];
if (root.childElementCount) {
const tw = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
let next;
while (next = tw.nextNode()) {
list.push(next);
}
}
...
) 运算符方式比 unshift
方法更快TreeWalker
是迄今为止最快的可以找到基准测试 here .
关于javascript - querySelectorAll vs NodeIterator vs TreeWalker - 最快的纯 JS 平面 DOM 迭代器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64551229/
我有以下内容: var searchSuggestionsItems = document.querySelectorAll("#search-user-results .live-search-re
我正在尝试查找具有以下内容的元素: doc.querySelectorAll('#divContentList article'); 它运行良好,但另一位开发人员告诉我我应该写: doc.queryS
尝试在错误控制台中执行这 2 个代码块: 第一个。输出节点列表。 var selector = "*[data-type=day][data-day='23']"; var a = document.
这是我的 JavaScript 代码: function answer(){ var list = document.querySelectorAll("#fish"); list[1].onclic
假设我有: ... ... ... ... ... ... ... 如何选择 元素,但仅限于 testimonials-wrapper 内的元素 尝试过:d
我创建了一个表,我们将其命名为 RPT_ACCOUNTS 代码|描述|类型01|银行|BA02|税|TA 当我从数据表中提取信息时,我会在 html 中直观地创建表格 row.dataset.rpt_
document.querySelectorAll('#salary-min, #salary-max').addEventListener('input', event => event.tar
这个问题已经有答案了: What do querySelectorAll and getElementsBy* methods return? (12 个回答) 已关闭 2 年前。 javaScrip
为了简单起见,我有以下 html,它不是我编写的,我无法控制。 我正在尝试为我们的职员编写一个脚本,该脚本必须将数据输入到此 Web 界面,以便她可以将数据从 Excel 复制并粘贴到 Web
我的代码有问题。现在,如果我单击第一个元素,所有元素将变为红色,如果我第二次单击它们将变为绿色。我想为 fa-heart 类的每个元素设置两个独立的事件。我会更好地解释:如果我第一次点击第一个元素 D
我已经创建了简单的 html 表单,我想使用 javascript 为输入字段标签设置动画。我使用 querySellectorAll 方法来识别对象,并使用控制台记录 querySelectorAl
我目前正在尝试适应this demo当您单击应用了相同类的链接时,用于页面转换。 我不确定如何在使用 querySelectorAll 后为具有相同类的所有元素调整以下代码。您认为应该进行哪些调整才能
我目前正在尝试适应this demo当您单击应用了相同类别的链接时,可以实现页面转换。目前,在 @ourmaninamsterdam 的推荐 here 后,我有以下代码:但我似乎无法让它发挥作用。您对
var arr = [].slice.call(document.querySelectorAll("a[href*='pricing']")); 返回一个长度为6的数组。 var arr = [].
我在 querySelectorAll 方面遇到问题。 这是我的代码: $(window).load( function() { // Add animations
在 JavaScript 中使用 :checked 选择器 document.querySelectorAll() 时,我发现存在不一致的行为。当 :checked 选择器用于复选框或单选按钮时,它不
我有一个表单,其中有多个选择框和带有类似名称的数组的输入。所以我有多个名称为 personroom[] 的选择框。我想用这个得到这些 var personroom=document.querySel
不确定这是否是导致我的项目出现错误的原因。 所以我有一堆具有相同类的 div,我通过选择它们 var CampaignInfo = document.querySelectorAll(".campai
假设我有以下标记... 无论如何,我可以使用 querySelectorAll 选择它们吗? 我尝试过 document.querySelectorAll([data-namespace-*])
我想使用 querySelectorAll 获取页面上多个下拉列表的选定值,然后将它们打印在页面上的其他位置。 我正在努力寻找正确的方法来执行此操作,因为它们都有不同的名称(“dropDown[0]”
我是一名优秀的程序员,十分优秀!