如何获取网页中使用的DOM元素数量

Question

使用jQuery,我可以轻松获得网页使用的DOM elemet的数量:

$('*').length;

但并非所有网站都使用jQuery.

所以我的问题是:如何使用纯javascript和js控制台获取网页中使用的DOM元素的数量.

Answer 1

假设您的意思是"HTMLElementNodes"而不是"所有节点"(包括诸如文本节点之类的东西,也可以被您的jQuery示例跳过),那么:

document.getElementsByTagName('*').length

这仍然需要使用DOM.除了作为一串文本之外,纯 JavaScript不能与HTML文档交互.

Answer 2

这很简单:

document.getElementsByTagName('*').length

如果你可以忽略旧的浏览器,你也可以保留一些类似jQuery的语法:

var $;
$ = document.querySelectorAll.bind(document);
$('*').length;

Answer 3

这个问题是 google 上“js count all dom Nodes”的最高结果，但现在已经是 2021 年了，我们有了 ShadowDOM，所以以前的答案都不会真正给出准确的结果。

最好使用这个函数，它基于Lighthouse用来计算真实 DOM 大小的代码。

function countNodes(element = document.body) {
  let count = 0; let child = element.firstElementChild;    
  while (child) { count += countNodes(child);
    if (child.shadowRoot) { count += countNodes(child.shadowRoot); }
    child = child.nextElementSibling; count++;
  } return count;
}