如何用JavaScript选中指定ID元素下无ID的子级、孙级及后代元素

代码失效核心原因 #

• querySelectorAll() 返回的是包含所有匹配元素的 NodeList集合，不是单个DOM元素，不能直接调用.style属性修改样式，必须遍历集合逐个赋值
• 你提供的第三个函数中选择器字符串未闭合引号，存在语法错误，会直接跳过执行
• 如果父元素ID为纯数字39，用CSS选择器#39匹配会有语法问题，推荐直接用getElementById('39')获取父元素，不需要处理转义

需求1：选中指定无ID孙级DIV修改z-index #

function huhu() {
  const parent = document.getElementById("parent-element-with-id");
  // :scope指代当前parent元素，精准匹配父元素下的第二层div（孙级）
  const targetSunDiv = parent.querySelector(":scope > div > div");
  // 加判断避免元素不存在时报错
  if (targetSunDiv) {
    targetSunDiv.style.zIndex = "9999";
  }
}

需求2：选中父元素下所有后代元素修改z-index #

function huhu() {
  const parent = document.getElementById("parent-element-with-id");
  // 选中父元素下所有后代元素
  const allDescendants = parent.querySelectorAll("*");
  // 遍历所有元素逐个设置z-index
  allDescendants.forEach(element => {
    element.style.zIndex = "9999";
    // 如果修改后不生效，可打开下一行注释，给元素设置非static定位
    // element.style.position = "relative";
  });
}

补充说明 #

如果你的父元素ID是纯数字39，只需要把getElementById的参数替换为'39'即可，其余逻辑不需要修改。

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