如何在document.querySelectorAll中使用变量选择直接子元素

你原来的写法存在两个核心问题：

• 将DOM对象直接塞进模板字符串，DOM对象转字符串后会变成[object HTMLUListElement]这类无意义的文本，不是合法CSS选择器，无法匹配到对应元素
• 选择器多写了一层> ul：你已经拿到了.main-navigation > ul作为父元素，要它的直接<li>子元素不需要再向下找一级ul

方案1：基于父元素直接查询（最推荐） #

DOM元素本身就支持调用querySelectorAll方法，配合:scope伪类指代当前调用方法的父元素，即可直接筛选它的直接子元素：

let parent = document.querySelector(".main-navigation > ul");
// :scope 指代当前parent元素，> li 匹配所有直接li子元素
let li = parent.querySelectorAll(":scope > li");

li.forEach((el) => {
  el.style.border = "2px solid red";
});

方案2：选择器字符串拼接 #

如果你的OOP场景需要复用选择器字符串，可以直接存储选择器文本再做拼接：

// 存储选择器字符串而非DOM对象
let parentSelector = ".main-navigation > ul";
let li = document.querySelectorAll(`${parentSelector} > li`);

li.forEach((el) => {
  el.style.border = "2px solid red";
});

以上两种方案运行后，都会仅给「首页、关于我们+、联系我们」三个一级li添加红色边框，嵌套在子ul内的「愿景、使命」不会被选中，符合需求。

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