如何在querySelector中使用模板字符串检测元素类名避免误选元素

问题根因 #

你原来的代码仅取了父元素的tagName拼到选择器里，最终生成的选择器是NAV > ul li，等于匹配页面上所有<nav>标签下的列表项，自然会把第二个无类名的导航也包含进去。

方案1：直接在获取到的父元素下查询（更推荐） #

既然你已经拿到了符合类名条件的父元素parents，直接在它的上下文调用querySelectorAll即可，只会选中该父元素内部的节点，不需要额外拼接复杂选择器，复用性更高，类名可单独抽为变量修改：

let targetParentClass = ".one"; // 类名抽为变量，需要修改时只改这里即可
let parents = document.querySelector(targetParentClass);
let li = parents.querySelectorAll("ul li");
li.forEach((elem)=>{elem.style.border="1px solid red"});

方案2：拼接带类名的模板字符串 #

如果你确实需要拼接完整的全局选择器，直接把类名作为变量拼入模板即可：

const targetClass = "one"; // 类名变量，可自由传入
let li = document.querySelectorAll(`.${targetClass} > ul li`);
li.forEach((elem)=>{elem.style.border="1px solid red"});

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