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

原文 标签 javascript web-scraping puppeteer queryselector

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

最佳答案

您仍然可以使用 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 元素

关于javascript - 如何使用 querySelector 选择下一个直接子级?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63313418/

相关文章:

node.js - 为什么 Puppeteer 需要 --no-sandbox 在 Cloud Functions 中启动 Chrome

javascript - 选择 jquery onChange 不适用于 X-editable

javascript - 推迟 ember.js 应用程序准备就绪,直到初始 ajax 调用返回

python - 如何使用漂亮的汤来获取Google财经中股票的当前价格?

node.js - Puppeteer/Nodejs,如何等待事件条件得到满足

javascript - puppeteer :有没有办法获取page.on()的所有事件监听器?

javascript - 使用 JS 在 HTML 表格中呈现 JSON 数据

javascript - Rest In Place gem 成功事件回调

python - Selenium Python-访问搜索结果的下一页

python - 为什么Python Beautiful Soup从抓取的网址中剥离参数