如何使用 querySelector select 下一个直接 child？

Question

我想遍历 div 并将 <h4> 和 <ul> 存储在 object 中。我已经使用了 querySelectorAll 但这将 select 所有 h4 或 ul 元素。

在图片中你可以看到我正在 select 立即 <h4> 和 <ul> child，同样我想 select 下一个<h4> 和 <ul> 元素并将其存储在 object.

中

Answer 1

您可能应该 select 所有 'h4' 和 'ul' 元素到它们自己的集合中，识别这些集合中的当前元素并简单地选择以下元素。这是一个小片段，展示了如何找到下一个 <h4>:

const allH4s= [...document.querySelectorAll("h4")];

// assuming a <h4> has been selected:
const firstH4=document.querySelector("h4"),
// then nextH4 will be the immediately following h4 element in the document:
  nextH4=allH4s[allH4s.indexOf(firstH4)+1];

[... collection] 从集合创建数组。这是必要的，因为我们需要访问 Array-method indexOf().

您可以为您的 <ul> 做类似的事情。

Answer 2

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

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

IMDB web 示例证明

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 不会 select 下一个 h4 或下一个 ul selects 无论 DOM 元素紧挨着当前元素

如何使用 querySelector select 下一个直接 child？

How to select the next immediate child using querySelector?

javascript

web-scraping

puppeteer

queryselector