Question

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

$('*').length;

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

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

Answer 1

假设您的意思是“HTMLElementNodes”而不是“所有节点”（包括文本节点之类的东西，也可以被您的jQuery示例跳过），那么：

document.getElementsByTagName('*').length

这仍然需要使用DOM。 Pure JavaScript不能与HTML文档交互，而不能与文本字符串交互。

Answer 2

真的很简单：

document.getElementsByTagName('*').length

如果您可以忽略旧浏览器，您还可以使用以下内容保留一些类似jQuery的语法：

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

Answer 3

使用递归函数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 4

这个问题是 google 上“js 计算所有 dom 节点”的最高结果，但现在是 2021 年，我们有 ShadowDOM，所以以前的这些答案都不会给出准确的结果。

最好使用这个基于 code used by 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 5

主要答案并没有真正算出一切（我认为影子DOM将被排除在外）

使用以下代码段对我更有效：

$$('*').length

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

5 个答案: