Получить только дочерний LI при использовании "getElementsByTagName (" li "). Length"

Question

Я использую приведенную ниже команду, чтобы получить дочерние узлы LI для идентификатора элемента «treeview_sub», но она возвращает мне количество всех присутствующих LI рекурсивно.

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>

Как получить только длину без ее рекурсивного прохождения?

Answer 1

Вы можете использовать document.querySelectorAll, с >, чтобы выбрать только элементы li, которые являются прямыми дочерними элементами:

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