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

Question

使用 jQuery 我可以轻松获取网页使用的 DOM 元素的数量：

$('*').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

这个问题是谷歌上“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;
}

Answer 4

使用递归函数

countChildrenNumber

:

function countChildrenNumber(el) {
  let result = 0
  if (el.children && el.children.length > 0) {
    result = result + el.children.length
    for (let i = 0; i < el.children.length; i++) {
      result = result + countChildrenNumber(el.children[i])
    }
  }
  return result
}

然后通过传递

document

作为参数来调用它

countChildrenNumber(document)

Answer 5

如何计算特定 DOM 元素（例如 div）内的元素数量。

在浏览器 DevTools（Chrome、Firefox 和 Safari）中，选择 DOM 中的一个元素，然后：

$0.getElementsByTagName('*').length

（当前选择的元素是

$0

）

您也可以通过提供类名或 id 的老式方式来完成此操作：

document.getElementsByClassName('my-class')[0].getElementsByTagName('*').length

document.getElementById('my-id').getElementsByTagName('*').length

Answer 6

主要答案并没有真正计算所有内容（我认为影子 DOM 会被排除在外）

使用下面的代码片段对我来说效果更好：

$$('*').length