1

作为一些性能测试的一部分，我想查看在任何给定时间页面中有多少 DOM 元素。

最初我使用控制台并手动输入：document.getElementsByTagName('*').length

但是由于元素是动态添加和删除的，我想要一种方法来自动显示它而无需手动执行此操作。

对我来说，使用 CSS 计数器似乎是最简单的方法：

（这是一个演示：见右上角的黄色框）

html {
    counter-reset: elems;
    counter-increment: elems;
}
html * {
  counter-increment: elems;
}
body:after {
    content: counter(elems) ' elements';
    position: absolute;
    top:0;
    right: 0;
    padding: 0.5rem;
    background-color: yellow;
    z-index: 1000000000; /* make sure display appears on top */
}
html + head + body = 3... + 
A section with 4 divs = 5..... 3 + 5 = 8
<section>
  <div>div1</div>
  <div>div2
    <div>div3</div>
  </div> 
  <div>div4</div>
<section>

问题是这种技术不适用于一些更复杂的网站，我猜这是因为它有点幼稚。

以维基百科的主页为例- 我使用浏览器检查器添加上述 css-counter css 并产生“888 个元素”

但是，当我使用控制台时document.getElementsByTagName('*').length- 它返回了 975 个元素。

所以我的问题是：

是什么导致了 DOM 元素数量的巨大差异，有什么我没有考虑到的吗？

这可以用 CSS 可靠地完成吗？

4

2 回答 2

0

是什么导致了 DOM 元素数量的巨大差异，有什么我没有考虑到的吗？

display:none是的，css 计数器会忽略已应用的元素。

从规格：

不生成框的元素（例如，显示设置为无的元素，或内容设置为无的伪元素）无法设置、重置或增加计数器。计数器属性在这样的元素上仍然有效，但它们必须无效。

演示：

html {
    counter-reset: elems;
    counter-increment: elems; /* Include the html element as well */
}
html * {
  counter-increment: elems;
}
body:after {
    content: counter(elems) ' elements';
    position: absolute;
    top:0;
    right: 0;
    padding: 0.3rem;
    background-color: lightyellow;
    z-index: 1000000000; /* make sure display appears on top */
}
.hidden {
  display: none;
}
html + head + body = 3... + 
A section with 4 divs = 5..... 3 + 5 = 8
<section>
  <div>div1</div>
  <div>div2
    <div>div3</div>
  </div> 
  <div>div4</div>
  <div class="hidden"></div>
  <div class="hidden"></div>
  <div class="hidden"></div>
  <div class="hidden"></div>
  <div class="hidden"></div>
  <div class="hidden"></div>
<section>

另一方面，document.getElementsByTagName('*').length将计算元素display:none

这可能只是我没有考虑到的差异之一，但我想说这可能是造成差异的主要原因。

于 2017-02-09T11:34:18.390 回答
0

您获得不同计数的原因是因为您的counter-increment: elems;规则的优先级低于counter-incrementWikipedia 样式表中的某些现有规则，因此有些元素会增加其他计数器（一个示例名为“listitem”）但不是您的。

您必须使您的选择器更具体并覆盖维基百科，或添加网站自己的计数器（或编写一些 JavaScript 以在现有counter-increment规则中添加您自己的计数器，以避免破坏现有样式）。

于 2017-02-09T10:45:51.113 回答