如何计算具有javascript类的父节点的所有子节点？

Question

In javascript preferably. For example:

    <div id="parent">
      <div class="one"></div>
      <div class="one"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="two"></div>
    </div>

how would I count the number of child elements with class "one" (3)? Thank you.

Answer 1

You can use querySelectorAll .

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors.

---

selectors is a string containing one or more CSS selectors separated by commas.

You can refer all CSS selectors here .

In this case #parent > .one will search for elements with class one which are immediate children of element with id parent .

 var count = document.querySelectorAll("#parent > .one").length; console.log(count); 

 <div id="parent"> <div class="one"></div> <div class="one"></div> <div class="one"></div> <div class="two"></div> <div class="two"></div> </div>