在前端开发中，我们经常需要通过DOM操作来获取指定元素及其子元素。querySelectorAll() 是一个非常实用的方法，可以帮助我们快速地获取文档中所有匹配指定选择器的元素，并返回一个 NodeList 对象。但是，在使用 querySelectorAll() 方法时，获取到的元素并不一定都是我们想要的。有时候我们可能只想获取指定元素的直接孩子，这时候就需要使用 querySelectorAll() 的另一种形式：querySelectorAll(":scope > 子元素选择器")。
:scope 伪类选择器
在介绍如何使用 querySelectorAll() 获取直接孩子之前，需要先了解一下 :scope 伪类选择器。scope 伪类选择器代表当前查询的上下文，也就是当前元素本身。可以将 :scope 选择器作为 querySelectorAll() 方法的第一个参数来指定查询的范围。
例如，如果我们想要获取 div 元素下的所有 p 元素，可以使用以下代码：
const div = document.querySelector("div");
const paragraphs = div.querySelectorAll(":scope > p");其中，div 变量代表一个 div 元素，paragraphs 变量则代表 div 元素下的所有直接孩子 p 元素。:scope > p 表示获取当前元素（即 div 元素）下的所有直接孩子 p 元素。
获取直接孩子
在了解了 :scope 伪类选择器之后，我们可以开始使用 querySelectorAll() 方法获取指定元素的直接孩子了。例如，如果我们想要获取一个 ul 元素下的所有直接孩子 li 元素，可以使用以下代码：
const list = document.querySelector("ul");
const items = list.querySelectorAll(":scope > li");其中，list 变量代表一个 ul 元素，items 变量则代表 ul 元素下的所有直接孩子 li 元素。:scope > li 表示获取当前元素（即 ul 元素）下的所有直接孩子 li 元素。
除了使用标签名作为选择器之外，还可以使用其他 CSS 选择器来获取直接孩子。例如，如果我们想获取 ul 元素下第一个直接孩子元素中的所有 a 元素，可以使用以下代码：
const firstItem = list.querySelector(":scope > li:first-child");
const links = firstItem.querySelectorAll(":scope > a");其中，:first-child 表示获取当前元素的第一个直接孩子元素。
总结
使用 querySelectorAll() 方法获取指定元素的直接孩子，可以帮助我们更加精准地获取需要的元素。在实际开发过程中，我们可以根据具体需求选择不同的 CSS 选择器来获取指定元素的直接孩子，提高代码的可读性和复用性。
示例代码：
-- -------------------- ---- -------
----
----
-- ------------- -----
-- ------------- -----
-----
----
-- ------------- -----
-- ------------- -----
-----
-----
--------
----- ---- - -----------------------------
----- ----- - ----------------------------- - -----
------------------- -- -------- - -------------- ------------- -
----- --------- - -------------------------- - -----------------
----- ----- - ---------------------------------- - ----
------------------- -- -------- - ------------ ----------- -
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14499