如何使用querySelectorAll获取首个ul下的一级li元素并生成数组？

嗨，这问题很常见，我来给你捋清楚！你要的是.nav容器里第一个<ul>的直接子级<li>（也就是Element 1、2、3、4那些，排除嵌套ul里的子项），对应的CSS选择器其实很简单：

.nav > ul > li

为什么这个选择器管用？ #

• >是子选择器，只会匹配直接父元素下的子节点，不会深入到嵌套的层级里。
• .nav > ul精准定位到.nav下的第一个（也是这里唯一的）ul，再用> li就只选中这个ul的直接子li，完美避开嵌套ul里的Element 2.1、4.1这类子项。

完整的JavaScript代码 #

const allVisibleElements = document.querySelectorAll('.nav > ul > li');

// 如果你想验证结果，可以遍历输出每个li的文本
allVisibleElements.forEach(item => {
  console.log(item.textContent.trim());
});

额外小提示 #

如果你不小心写成了.nav ul li（没有>），那会选中所有嵌套层级的li，包括那些子菜单里的项，这肯定不是你要的结果，所以一定要记得用子选择器>来限定层级哦！

内容的提问来源于stack exchange，提问作者hvma411