Search code examples
javascripthtmlhtml-tablescripting-language

Get only child LI when using "getElementsByTagName("li").length"

I am using below command to get the child LI nodes for the element ID 'treeview_sub' but it returns me the count of all the LI present recursively.

var treeLILength = document.getElementById("treeview_sub").getElementsByTagName("li").length;
console.log(treeLILength);
<ul id="treeview_sub">
  <li id="Invoice" data-expanded="true">Value1
    <ul id="Invoice_ul" value="value" data-expanded="true">
      <li id="node1">Invoice</li>
    </ul>
  </li>
  <li id="cost" data-expanded="true">Value2
    <ul id="cost_ul" value="Cost" data-expanded="true">
      <li id="node2">Amount</li>
    </ul>
  </li>
</ul>

How do i get only the length without it traversing recursively?

Solution

  • You can use document.querySelectorAll, with > to select only the li elements that are direct children:

    var treeLILength = document.querySelectorAll("#treeview_sub > li").length;  // 2