如何使用 querySelector 选择下一个直接子级？答案

【问题标题】：How to select the next immediate child using querySelector?如何使用 querySelector 选择下一个直接子级？
【发布时间】：2023-03-19 20:45:01
【问题描述】：

我想遍历一个 div 并将 <h4> 和 <ul> 存储在一个对象中。而且我已经使用了 querySelectorAll 但这将选择所有 h4 或 ul 元素。

在图片中你可以看到我选择了直接的<h4> 和<ul> 子元素，同样我想选择下一个<h4> 和<ul> 元素并将其存储在一个对象中。

【问题讨论】：

使用nextElementSibling

标签： javascript web-scraping puppeteer queryselector

【解决方案1】：

您仍然可以使用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 不会选择下一个 h4 或下一个 ul，它会选择当前元素旁边的任何 DOM 元素

【讨论】：

我把索引放错地方了，非常感谢

【解决方案2】：

您可能应该选择所有 'h4' 和 'ul' 元素到它们自己的集合中，识别这些集合中的当前元素并简单地选择以下元素。这是一个小sn-p，显示如何找到下一个<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] 从集合中创建一个数组。这是必要的，因为我们需要访问数组方法indexOf()。

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

【讨论】：