如何使用javascript计算另一个div中的div总数答案

【问题标题】：how to count total number of divs inside another div using javascript如何使用javascript计算另一个div中的div总数
【发布时间】：2011-01-16 00:30:42
【问题描述】：

如何使用javascript计算另一个div中包含的div元素的总数？

【问题讨论】：

当你不包含 jQuery 标签时，你淘汰了很多 JavaScript 开发人员（我也是）！
@alex：那又怎样？这与 jQuery 无关，并且 OP 可能无法使用 jQuery，或者他/她可能不想使用 jQuery。坦率地说，对于一个非 jQuery 问题，我宁愿不要那些只查看带有 jQuery 而不是 JavaScript 标记的问题的人的帮助。

标签： javascript

【解决方案1】：

getElementsByTagName() 不仅是 document 方法，而且可以在任何 DOM 元素上运行。

element.getElementsByTagName 是相似 document.getElementsByTagName，除了它的搜索仅限于那些元素的后代指定元素

在https://developer.mozilla.org/en/DOM/element.getElementsByTagName查看更多信息

所以你所要求的实际代码是

var container_div = document.getElementById('id_of_container_div');
var count = container_div.getElementsByTagName('div').length;

【讨论】：

getElementsByTagName 在使用 Gecko 引擎的浏览器之外的浏览器中不可用。在 IE6 中试一试。
我很确定 getElementsByTagName 在 IE6 中？
@amphetamachine 然后我想知道为什么这个页面：msdn.microsoft.com/en-us/library/ms536439(VS.85).aspx 说“这个功能需要 Microsoft Internet Explorer 5 或更高版本”;) getElementsByTagName 是在 IE6 中可用跨度>
哈哈，IE6不掉线的随机时刻。

【解决方案2】：

您可以使用@davidcmoulton 的便捷要点： https://gist.github.com/davidcmoulton/a76949a5f35375cfbc24

我发现它不仅可以计算 DIV，还可以列出页面所有元素类型的计数，这非常有用。

这里是 Gist 的副本以供进一步参考：

(function (window, undefined) {
//  Counts all DOM elements by name & logs resulting object to console. 
var forEach = Array.prototype.forEach,
counter = {},

incrementElementCount = function (elementName) {
  if (counter.hasOwnProperty(elementName)) {
    counter[elementName] += 1;
  } else {
    counter[elementName] = 1;
  }
},

processNode = function (node) {
  var currentNode = node;
  if (currentNode.nodeType === currentNode.ELEMENT_NODE) {
    incrementElementCount(currentNode.nodeName);
    if (currentNode.hasChildNodes) {
      forEach.call(currentNode.childNodes, function (childNode) {
        if (childNode.nodeType === currentNode.ELEMENT_NODE) {
          processNode(childNode);
        }
      });
    }
  }
};

processNode(window.document.firstElementChild);

console.log(counter);

}(this));

【讨论】：

【解决方案3】：

使用 jquery 计算 div 元素的方法有很多。

但最流行和最简单的方法是：

$(document).ready(function(){ 
  var divCount = $("div").size();
  alert(divCount);
});

与

$(document).ready(function(){ 
  var divCount = $("div").length;
  alert(divCount);
});

对你有帮助

【讨论】：