使用"getElementsByTagName(" LI ").length"时只获取子 LI

Question

我正在使用以下命令获取元素 ID "treeview_sub"的子 LI 节点，但它递归地返回我存在的所有 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