2016-11-26 142 views
0

如何使用querySelectorAll来选择<p>而只有父母<div class="entry-content">使用querySelectorAll来定位嵌套元素

例如,

<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>元素。

如何修改以完成此任务?

回答

5

指定div的类:

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

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>