Question

让我说：

<div class = "testimonials-wrapper">
   <blockquote>...</blockquote>
   <blockquote>...</blockquote>
   <blockquote>...</blockquote>
</div>

<blockquote>...</blockquote>

<div class = "testimonials-wrapper">
   <blockquote>...</blockquote>
   <blockquote>...</blockquote>
   <blockquote>...</blockquote>
</div>

如何选择<blockquote>元素，但只能选择testimonials-wrapper内的元素

尝试过：document.querySelectorAll(".testimonials-wrapper .blocquote");，但没有运气

Answer 1

您可以简单地使用：

document.querySelectorAll(".testimonials-wrapper blockquote")

这将仅返回所有<blockquote>元素，但仅返回testimonials-wrapper类内部的元素。

var blockquotes = document.querySelectorAll(".testimonials-wrapper blockquote");
console.log( blockquotes.length )

<div class = "testimonials-wrapper">
   <blockquote>...</blockquote>
   <blockquote>...</blockquote>
   <blockquote>...</blockquote>
</div>

<blockquote>...</blockquote>

<div class = "testimonials-wrapper">
   <blockquote>...</blockquote>
   <blockquote>...</blockquote>
   <blockquote>...</blockquote>
</div>

您可以在此演示中看到，返回的blockquotes.length是6而不是7，因为它使用此选择器忽略了中间的<blockquote>。

Answer 2

您可以使用下面的查询来获取blockquote类中的所有testimonials-wrapper

document.querySelectorAll(".testimonials-wrapper blockquote")

Answer 3

所有具有特定类的父元素的元素

好的，因此“所有元素”为universal selector：

“带有父元素”是child combinator

... > *

“特定类别”是class selector：

.testimonials-wrapper > *

.testimonials-wrapper .blocquote

这会选择testimonials-wrapper的后代而不是子代，您会误输入blockquote，并且使用了类选择器而不是类型选择器。

Javascript querySelector具有父元素且具有特定类的所有元素

3 个答案: