使用JavaScript获取任何<ul>中<li>的数量

Question

我有一个代码，我需要在其中查找li标签的数量，而不是嵌套的标签的数量。

<ul class="ulStart">
   <li>
      <ul class="ulNested">
         <li></li>
         <li></li>
      </ul>
  </li>
  <li></li>
</ul>

做

document.querySelector('.ulStart').getElementsByTagName('li')

给我4个<li>，这不是我想要的，我希望li中存在ulStart个标签的数量。让我知道是否有办法。没有jQuery，纯JavaScript。

Answer 1

let count = document.querySelectorAll("ul.ulStart > li").length;
console.log(count);

<ul class="ulStart">
  <li>
    <ul class="ulNested">
      <li></li>
      <li></li>
    </ul>
  </li>
  <li></li>
</ul>

使用>（直接子级）CSS选择器。参见MDN - Child selectors。

Answer 2

console.log(document.querySelectorAll('.ulStart > li').length);

<ul class="ulStart">
   <li>
      <ul class="ulNested">
         <li></li>
         <li></li>
      </ul>
  </li>
  <li></li>
</ul>

Answer 3

<ul class="ulStart">
   <li>
      <ul class="ulNested">
         <li></li>
         <li></li>
      </ul>
  </li>
  <li></li>
</ul>

尝试使用以下查询选择器：

console.log(document.querySelectorAll('.ulStart > li').length);

结果：

HTMLCollection(2) [li, li]