如何使用javascript計算另一個div內的div總數

Question

如何使用javascript計算另一個div中包含的div元素的總數？

Answer 1

getElementsByTagName()不僅是一種document方法，而且可以在任何 DOM 元素上運行。

元素。 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;

Answer 2

您可以使用@davidcmoulton 的方便 Gist： 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);
});

它對你有幫助