嵌套<ul>結構體。 僅循環通過頂層<li>元素</li></ul>

Question

我有以下 HTML 結構：

<ul>

  <li></li> <!-- First element top-level element -->

  <li></li> <!-- Second element top-level element -->

  <ul>
    <li></li>
    <li></li>
  </ul>

  <li></li> <!-- Third element top-level element -->

  <ul>
    <li></li>
    <li></li>
  </ul>

</ul>

我怎樣才能 select 並僅循環通過第一個ul結構的頂級<li>元素？ （應該做3個循環） 。 我嘗試了以下方法，但循環遍歷所有<li>元素(7 loops) 。

var li_elements = cat_tree
  .getElementsByTagName("ul")[0]
  .getElementsByTagName("li");

for (let element of li_elements) {
  // Do Some Awesome Code Here
}

Answer 1

使用子選擇器而不是 getElementByTagName。

我不知道父結構，但試試這個。

var li_elements = cat_tree.querySelectorAll("ul:first-child > li");

Answer 2

使用 querySelectorAll 你會得到一個節點列表來像數組一樣應用 foreach() 方法