Firefox 或 JavaScript，算上 DOM

Posted 2023-02-22

【中文标题】Firefox 或 JavaScript，算上 DOM

【英文标题】：Firefox Or JavaScript, count the DOM

【发布时间】：2011-01-15 06:12:05

【问题描述】：

我确定这很简单，但我不知道该怎么做。 如何计算 html 页面中 DOM 元素的数量？我想在用户脚本或书签中执行此操作，但我不知道如何开始！

【问题讨论】：

您想了解作为 HTML 元素的 DOM 节点或 DOM 节点吗？ DOM 包括文本、cmets 和属性等内容作为节点。

【参考方案1】：

将此用于Element 节点：

document.getElementsByTagName("*").length

对于任何节点，您都可以像这样扩展Node：

Node.prototype.countChildNodes = function() 
  return this.hasChildNodes()
    ? Array.prototype.slice.apply(this.childNodes).map(function(el) 
        return 1 + el.countChildNodes();
      ).reduce(function(previousValue, currentValue, index, array)
        return previousValue + currentValue;
      )
    : 0;
;

那么您只需致电document.countChildNodes。

【讨论】：

有什么方法可以在 iframe 中添加元素的数量吗？

@corretge 如果您可以访问contentDocument，这将是可能的。只需迭代使用 document.getElementsByTagName("*") 获得的元素并将它们计为 1，然后为每个 iframe 元素节点 (tagName==='IFRAME') 添加其 contentDocument 中的元素数。

非常感谢！我还有另一个“小”问题：域、协议和端口必须匹配。正常:)

@corretge 那是因为security reasons。

这不是所有 dom 节点的实际计数。它是文档中所有元素的计数。不包括属性、AJAX'ed XML 等。所以这是非常不准确的

【参考方案2】：

// 如果重要的话，您可以使用相同的方法来获取每个标签的计数

  function tagcensus(pa)
    pa= pa || document;
    var O= ,
    A= [], tag, D= pa.getElementsByTagName('*');
    D= A.slice.apply(D, [0, D.length]);
    while(D.length)
        tag= D.shift().tagName.toLowerCase();
        if(!O[tag]) O[tag]= 0;
        O[tag]+= 1;
    
    for(var p in O)
        A[A.length]= p+': '+O[p];
    
    A.sort(function(a, b)
        a= a.split(':')[1]*1;
        b= b.split(':')[1]*1;
        return b-a;
    );
    return A.join(', ');

警报(tagcensus())

【参考方案3】：

在 javascript 中你可以这样做

document.getElementsByTagName("*").length

在 jQuery 中你可以这样做

jQuery('*').length