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

Question

我正在使用下面的命令获取元素 ID 'treeview_sub' 的子 LI 节点，但它 returns 我递归地显示所有 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，> 到 select 只有 li 直接子元素：

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