使用querySelectorAll來定位嵌套元素

Question

如何使用querySelectorAll來選擇<p>而只有父母<div class="entry-content">？

例如，

<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> 

我只想1款〜PARAGRAPH3被選中。

我目前使用var x = document.querySelectorAll("p");這是選擇的一切。

var x = document.querySelectorAll("div > p");對於獲得我所需要的東西非常不滿意，但我需要確保只選擇<div class="entry-content">中指定類別中的所有<p>元素。

如何修改以完成此任務？

Answer 1

指定div的類：

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

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>