Question

当我想用querySelectorAll获取直接子时，我有这个错误：

Failed to execute 'querySelectorAll' on 'Element': '> li' is not a valid selector.

的js

const lang = document.querySelector('.lang');
const items = lang.querySelectorAll('> li');

我不明白为什么。如果我添加此选择器：＆＃39; *＆gt;李＆＃39;它有效，但我发现根元素不是逻辑节点。

Answer 1

querySelector毕竟是一个功能。您无法将对象与参数组合在一起。您需要编辑函数体来执行此操作。这意味着在这里做这样的事情是不可能的。

只有可能的近距离选择

var parent = '.lang'; var child = document.querySelector(parent + ' > li');

Answer 2

我想你想要的是

const lang = document.querySelector('.lang');
const items = lang.querySelectorAll('li');

现在items将是li中所有.lang的地方，这就是querySelectorAll的工作方式。

详细了解MDN

为什么> li不起作用？因为它不是有效的CSS选择器

为什么* > li有效？因为它是有效的CSS选择器。而且，从技术上讲，任何有效html代码中的每个li都将始终位于ul或ol内；写作* > li与写作li

更新： 仅对于第一级li，请尝试以下操作：

let lang = document.querySelector(".lang");
let firstLevelLis = 
     Array.from(lang.querySelectorAll("li"))
     .filter(node => node.parentNode === lang)

for(let li of firstLevelLis){
  li.querySelector("span").style.backgroundColor = "red"
}

<ul class="lang">
  <li><span>Foo</span></li>
  <li><span>Bar</span></li>
  <li><span>Baz</span>
    <ul>
      <li><span>Don't make me red<span></li>
      <li><span>Neither me</span></li>
    </ul>
  </li>
</ul>

使用querySelectorAll获取直接子项

2 个答案: