querySelectorAll 排除所有 children

Question

我正在使用 querySelectorAll 并想排除所有 children 的一些元素。尝试这个不起作用。

document.querySelectorAll(".h:not(.p)").forEach(function(e){
  e.style.color = "red";
});

<div class="h">
  Hello World!
  <p class="p">This is a paragraph.</p>
</div>
<div class="h">
  Hello World!
  <p class="p">This is a paragraph.</p>
</div>
<div class="h">
  Hello World!
  <p class="p">This is a paragraph.</p>
</div>

如何实现只选择 parent 个元素？这样的选择器存在吗？

Answer 1

如果您给 parent 一个颜色，默认情况下，children 也会继承该颜色。您的代码是 select 仅 parents，.hs，如您所愿 - 问题是 children也继承了这种风格。

一个选项是迭代 children 或后代 <p>，并将它们的颜色更改为您想要的颜色，这样它们就不会继承 parent .

document.querySelectorAll(".h").forEach(function(e){
  e.style.color = "red";
});
document.querySelectorAll(".h .p").forEach(function(e){
  e.style.color = "initial";
});

<div class="h">
  Hello World!
  <p class="p">This is a paragraph.</p>
</div>
<div class="h">
  Hello World!
  <p class="p">This is a paragraph.</p>
</div>
<div class="h">
  Hello World!
  <p class="p">This is a paragraph.</p>
</div>

一个更好看的选择是给要着色的文本自己的元素，然后 select 仅那些元素：

document.querySelectorAll(".h span").forEach(function(e){
  e.style.color = "red";
});

<div class="h">
  <span>Hello World!</span>
  <p class="p">This is a paragraph.</p>
</div>
<div class="h">
  <span>Hello World!</span>
  <p class="p">This is a paragraph.</p>
</div>
<div class="h">
  <span>Hello World!</span>
  <p class="p">This is a paragraph.</p>
</div>

Answer 2

这个是只选择了.h个元素：

document.querySelectorAll(".h")

但是你用这些元素做什么？您将文本颜色设置为红色：

e.style.color = "red";

所以这些元素中的所有文本都将是 red，除非另有样式。如果 .p 元素应该是其他元素，请将它们设置为这样的样式：

document.querySelectorAll(".h").forEach(function(e){
  e.style.color = "red";
});

.p {
  color: black;
}

<div class="h">
  Hello World!
  <p class="p">This is a paragraph.</p>
</div>
<div class="h">
  Hello World!
  <p class="p">This is a paragraph.</p>
</div>
<div class="h">
  Hello World!
  <p class="p">This is a paragraph.</p>
</div>

或者您可以考虑 re-structuring 您的 HTML。例如：

<div>
  <span class="h">Hello World!</span>
  <p class="p">This is a paragraph.</p>
</div>
<div>
  <span class="h">Hello World!</span>
  <p class="p">This is a paragraph.</p>
</div>
<div>
  <span class="h">Hello World!</span>
  <p class="p">This is a paragraph.</p>
</div>

然后您可以专门定位您想要的内容，而不必想方设法“排除”其他内容。

Answer 3

段落中正在继承颜色

document.querySelectorAll(".h:not(.p)").forEach(function(e){
  e.style.color = "red";
  e.querySelectorAll(".p").forEach(function(elem) {
    elem.style.color = "black";
  });
});

querySelectorAll 排除所有 children

querySelectorAll exclude all children

javascript

html

dom