使用CSS计算DOM元素-工作不一致

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

最初我使用控制台并手动键入：

document.getElementsByTagName（'*'）。length

但由于元素是动态添加和删除的，所以我希望有一种方法可以自动显示这些元素，而不必手动执行

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

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

html{
计数器复位：elems；
反增量：elems；
}
html*{
反增量：elems；
}
正文：之后{
内容：计数器（元素）‘元素’；
位置：绝对位置；
排名：0；
右：0；
填充：0.5雷姆；
背景颜色：黄色；
z-index:100000000；/*确保显示屏显示在顶部*/
}

html+head+body=3…+
具有4个div=5….的截面。。。。。3 + 5 = 8
第一组
第二组
第三组
第四组

获得不同计数的原因是您的

计数器增量：elems规则的优先级低于维基百科样式表中某些现有的
计数器递增
规则，因此有些元素会递增其他计数器（一个示例名为“listitem”），但不会递增您的计数器

你必须使你的选择器更具体，覆盖维基百科，或者添加网站自己的计数器（或者编写一些JavaScript在现有的
计数器增量规则中添加你自己的计数器，以避免破坏现有的样式）。
你得到不同计数的原因是因为你的
计数器增量：elems规则的优先级低于维基百科样式表中某些现有的
计数器递增
规则，因此有些元素会递增其他计数器（一个示例名为“listitem”），但不会递增您的计数器

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

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

是的，css计数器将忽略应用了
显示：none
的元素

发件人：

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

演示：


html{
计数器复位：elems；
计数器增量：elems；/*还包括html元素*/
}
html*{
反增量：elems；
}
正文：之后{
内容：计数器（元素）‘元素’；
位置：绝对位置；
排名：0；
右：0；
填充：0.3rem；
背景颜色：浅黄色；
z-index:100000000；/*确保显示屏显示在顶部*/
}
.隐藏{
显示：无；
}
html+head+body=3…+
具有4个div=5….的截面。。。。。3 + 5 = 8
第一组
第二组
第三组
第四组

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

是的，css计数器将忽略应用了
显示：none
的元素

发件人：

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

演示：


html{
计数器复位：elems；
计数器增量：elems；/*还包括html元素*/
}
html*{
反增量：elems；
}
正文：之后{
内容：计数器（元素）‘元素’；
位置：绝对位置；
排名：0；
右：0；
填充：0.3rem；
背景颜色：浅黄色；
z-index:100000000；/*确保显示屏显示在顶部*/
}
.隐藏{
显示：无；
}
html+head+body=3…+
具有4个div=5….的截面。。。。。3 + 5 = 8
第一组
第二组
第三组
第四组
为什么不使用js interval更新元素的内容？放置一个要包含数字的div，并像每周一次一样更新内容500ms@TaufikAkbar是的，如果我不能用CSSCan做这件事，我会这么做。你可以在html页面上用空的主体和一堆元标记来尝试JS吗？因为如果我将规则更改为
html head*{counter increment:elems；}
它将显示0为什么不使用js interval更新元素的内容？放置一个要包含数字的div，并像每周一次一样更新内容500ms@TaufikAkbar是的，如果我不能用CSSCan做这件事，我会这么做。你可以在html页面上用空的主体和一堆元标记来尝试JS吗？因为如果我将规则更改为
html head*{counter increment:elems；}
它会显示0，即使我将其设置为！重要提示：在浏览器样式编辑器中，数字仍然是相同的。您是否成功尝试了此操作？啊，您是对的，不仅仅是另一个计数器-increments@Touffy我认为css
*
将忽略诸如meta、link、style、script等标记。即使我将其设置为！重要提示：在浏览器样式编辑器中，数字仍然是相同的。您是否成功尝试了此操作？啊，您是对的，不仅仅是另一个计数器-increments@Touffy我认为css
*
将忽略诸如meta、link、style、script等标记。