Question

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

Answer 1

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

元素。 getElementsByTagName 是相近文档。 getElementsByTagName ，但它的搜索仅限于那些作为后代的元素指定元素

在https://developer.mozilla.org/en/DOM/element.getElementsByTagName

了解详情

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

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

Answer 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));

Answer 3

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

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

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

和

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

对你有帮助

如何使用javascript计算另一个div内div的总数

3 个答案: