JavaScript querySelectorAll（）

Question

编写.querySelectorAll()代码，以查找属于具有该类的元素后代的所有段落元素：articles

找到所有这些元素的代码是什么？我试过

document.querySelectorAll("p>.articles")

并且它不起作用。

Answer 1

p>.articles表示：＆＃34;获取.articles＆＃34;的直接子女的所有<p>。

• .articles对于任何带有＆＃34;文章＆＃34;
的元素都是class selector
• p是<p>
的type selector
• >是child combinator选择器，表示您想要前一个选择器的直接子项

反转您的查询并移除直接选择器：.articles p

＆＃13;

＆＃13;

console.log(document.querySelectorAll(".article p").length);

＆＃13;

<div class="article">
  <p>Foo</p>
  <p>Foo</p>
  <p>Foo</p>
  <p>Foo</p>
  <p>Foo</p>
  <p>Foo</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你试图得到文章的所有段落后代，那将是

document.querySelectorAll(".articles p");

Answer 3

反过来，不是p>.articles，而是.articles p：

<div class="articles">
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
</div>

<div class="articles">
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
</div>

const paras = document.querySelectorAll(".articles p");
console.log(paras);
// NodeList [ p, p, p, p, p, p ]

>选择器也只会选择直接后代，因此您可能需要或不需要它，具体取决于您要完成的任务。

参考：CSS '>' selector; what is it?

Answer 4

https://www.w3schools.com/css/css_combinators.asp

后代选择器匹配指定元素的所有后代元素。您可以在元素之间使用空格。

答案是：document.querySelectorAll('.articles p');