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>

我只想选择 Paragraph1~Saragraph3 。

我目前正在使用var x = document.querySelectorAll("p");来选择所有内容。

var x = document.querySelectorAll("div > p");非常关闭以获得我需要的内容，但我需要确保只选择<p>中指定了类的所有<div class="entry-content">元素。

如何修改它以完成任务？

Answer 1

指定div的课程：

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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

使用querySelectorAll来定位嵌套元素

2 个答案: