Question

根据document.querySelectorAll的{{3}}，语法为

elementList = document.querySelectorAll(selectors);

，其中

*selectors* is a string containing one or more CSS selectors separated by commas

但这似乎不适用于通配符子选择器。请考虑以下HTML

<div id="container">
  <p>One <a href="#">Link One</a> </p>
  <p>Two <a href="#">Link Two</a> </p>
  <p>Three <a href="#">Link Three</a> </p>

  <a href=#>Outer Link One</a>
  <a href=#>Outer Link Two</a>
  <a href=#>Outer Link Three</a>
</div>

使用以下JS

[].forEach.call(document.querySelectorAll('#container *:not(a)'), 
function(node) {
  node.style.fontWeight = 'bold';
});

和以下CSS

#container {
  border: 1px solid #888;
  border-radius: 5px;
  padding: 10px;
}

#container *:not(a) {
  color: green;
}

您将看到css *:not(a)排除了样式中的所有锚标记，而JS中使用的相同选择器似乎只排除#container的直接子标记的锚标记，就好像它是#container > a

为什么会这样？有没有办法在querySelectorAll方法中获得与CSS相同的结果？

MDN page

Answer 1

为什么＆＃39; document.querySelectorAll＆＃39;只针对直系儿童？

它没有，它会寻找所有的后代。

您正在使包含p元素的a元素变为粗体，并且a元素继承该元素;而a元素有自己的颜色。如果你颠倒粗体和颜色，那么CSS应用粗体和JavaScript应用颜色，你会发现querySelectorAll正在做与CSS相同的事情：

＆＃13;

[].forEach.call(document.querySelectorAll('#container *:not(a)'), 
function(node) {
  node.style.color = "green";
});

＆＃13;

#container {
  border: 1px solid #888;
  border-radius: 5px;
  padding: 10px;
}

#container *:not(a) {
  font-weight: bold;
}

＆＃13;

<div id="container">
  <p>One <a href="#">Link One</a> </p>
  <p>Two <a href="#">Link Two</a> </p>
  <p>Three <a href="#">Link Three</a> </p>

  <a href=#>Outer Link One</a>
  <a href=#>Outer Link Two</a>
  <a href=#>Outer Link Three</a>
</div>

＆＃13;

有没有办法在querySelectorAll方法中获得与CSS相同的结果？

CSS和querySelectorAll已经在解决相同的元素。 :-)如果你希望a元素不是粗体，你必须告诉他们不要从他们的祖先那里继承：

#container a {
  font-weight: normal;
}

示例：

＆＃13;

[].forEach.call(document.querySelectorAll('#container *:not(a)'), 
function(node) {
  node.style.fontWeight = "bold";
});

＆＃13;

#container {
  border: 1px solid #888;
  border-radius: 5px;
  padding: 10px;
}

#container *:not(a) {
  color: green;
}
#container a {
  font-weight: normal;
}

＆＃13;

<div id="container">
  <p>One <a href="#">Link One</a> </p>
  <p>Two <a href="#">Link Two</a> </p>
  <p>Three <a href="#">Link Three</a> </p>

  <a href=#>Outer Link One</a>
  <a href=#>Outer Link Two</a>
  <a href=#>Outer Link Three</a>
</div>

＆＃13;

为什么'document.querySelectorAll'仅针对直接孩子？

1 个答案: