如何使用Vanilla JS选中ul标签的直接子li元素

解决方案 #

你原有代码的问题在于ul.querySelectorAll("li")会选中ul下所有层级的li元素，包括嵌套在子ul中的Vision、Mission对应的li。要仅选中ul的直接子li，有两种常用实现方式：

方式1：使用CSS子选择器结合:scope伪类 #

仅修改选择器即可，无需改动其他逻辑：

let one = document.querySelectorAll(".one");
one.forEach((elem)=>{
  let ul = elem.querySelector("ul");
  // :scope指代当前调用querySelectorAll的ul元素，> li 限定仅选择直接子li
  let li = ul.querySelectorAll(":scope > li");
  li.forEach((elem)=>{
    elem.style.border="2px solid red";
  })
});

方式2：使用children属性过滤 #

ul的children属性本身存储的就是所有直接子元素，过滤出标签为LI的元素即可：

let one = document.querySelectorAll(".one");
one.forEach((elem)=>{
  let ul = elem.querySelector("ul");
  // 从直接子元素中筛选出li标签
  let li = Array.from(ul.children).filter(child => child.tagName === 'LI');
  li.forEach((elem)=>{
    elem.style.border="2px solid red";
  })
});

两种实现都只会给Home、About、Contact三个一级菜单项加边框，不会命中嵌套的Vision、Mission菜单项。

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