使用 querySelectorAll 获取直接子项

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');

我不明白为什么。如果我添加这个选择器：'* > li' 它可以工作，但我发现根元素是 lang 节点不符合逻辑。

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>

Answer 3

我发现了这个：（使用 :scope 作为你的父引用（#parent））

const parent = document.querySelector('#parent');

const children = parent.querySelectorAll(':scope > div');
console.log(children); // ️ [div.child, div.child]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="parent">
      <div class="child">
        Child 1
        <div>Nested Child 1</div>
      </div>

      <div class="child">
        Child 2
        <div>Nested Child 2</div>
      </div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

来自 https://bobbyhadz.com/blog/javascript-queryselectorall-get-direct-children

使用 querySelectorAll 获取直接子项

Get direct child with querySelectorAll

javascript

selectors-api