我想遍历一个 div 并存储 <h4>
和 <ul>
一个物体内。
我已经使用了 querySelectorAll 但这将选择所有 h4 或 ul 元素。
在图片中,您可以看到我选择了即时 <h4>
和 <ul>
child ,同样我要选择下一个<h4>
和 <ul>
元素并将其存储在对象中。
最佳答案
您仍然可以使用 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/