使用querySelectorAll定位嵌套元素

Question

如何使用querySelectorAll仅选择父元素为<div class="entry-content">的<p>元素？

例如：

<div>
    <p>ParagraphA</p>
    <p>ParagraphB</p>
</div>
<div class="entry-content">
    <p>Paragraph1</p>
    <p>Paragraph2</p>
    <p>Paragraph3</p>
</div>
    <p>Paragraph4</p>
    <p>Paragraph5</p>

我只想选择第一段到第三段的内容。

我目前使用的是var x = document.querySelectorAll("p");，这会选择所有内容。 var x = document.querySelectorAll("div > p");已经非常接近我所需的，但我需要确保仅选择指定类别为<div class="entry-content">内的所有<p>元素。

如何修改以完成任务？

- KDX

Answer 1

指定 div 的类：

document.querySelectorAll('div.entry-content > p');

- Johnny Bueti

Answer 2

var entryContent = document.querySelector('.entry-content');//matches first
var p = entryContent.querySelectorAll("p"); //matches all
console.log(p);

<div>
    <p>ParagraphA</p>
    <p>ParagraphB</p>
</div>
<div class="entry-content">
    <p>Paragraph1</p>
    <p>Paragraph2</p>
    <p>Paragraph3</p>
</div>
<div>
    <p>Paragraph4</p>
    <p>Paragraph5</p>
</div>

- marmeladze