javascript - 如何使用 querySelector 选择下一个直接子级？

Question

我想遍历一个 div 并存储 <h4>和 <ul>一个物体内。
我已经使用了 querySelectorAll 但这将选择所有 h4 或 ul 元素。
在图片中，您可以看到我选择了即时 <h4>和 <ul> child ，同样我要选择下一个<h4>和 <ul>元素并将其存储在对象中。

Answer 1

您仍然可以使用 querySelectorAll并选择正确的索引(接下来是索引 1)

document.querySelectorAll('#main > ul')[1]
document.querySelectorAll('#main > h4')[1]

IMDB 网站的示例证明

const secondH4 = document.querySelectorAll('#main > h4')[1]
const secondUL = document.querySelectorAll('#main > ul')[1]

console.log(secondH4, secondUL)

<div id="main">
  <h4>11 August 2020</h4>
  <ul>
    <li>
      <a href="/title/tt4523530/?ref_=rlm">Valley of the Gods</a> (2019)
    </li>
  </ul>
  <h4>14 August 2020</h4>
  <ul>
    <li>
      <a href="/title/tt11394332/?ref_=rlm">Spree</a> (2020)
    </li>
    <li>
      <a href="/title/tt5723282/?ref_=rlm">Endless</a> (2020)
    </li>
    <li>
      <a href="/title/tt5617312/?ref_=rlm">The Bay of Silence</a> (2020)
    </li>
  </ul>
</div>

笔记
通过使用 nextSibling 您需要更多逻辑，因为 nextSibling 不选择下一个 h4 或下一个 ul 它选择当前元素旁边的任何 DOM 元素