如何获取class为demo的父元素下子元素的id，排除父元素id为simone的情况？

我来帮你搞定这个需求！咱们先明确目标：要获取所有class为demo的元素下的子元素ID，但如果这个demo元素的ID是simone，就跳过它的子元素，不收集其ID。

原代码的问题分析 #

你的现有代码存在几个小问题：

• name变量未初始化，直接拼接会导致结果开头出现undefined
• 没有判断子元素所属的.demo父元素是否为simone，所以会误收集simone-child的ID
• 在循环内部重复更新DOM，没必要且影响性能

修改后的完整代码 #

HTML部分（保持不变）

<div id="maja" class="demo"><div id="maja-child"></div></div>
<div id="alex" class="demo"><div id="alex-child"></div></div>
<div id="simone" class="demo"><div id="simone-child"></div></div>
<div id="pit" class="demo"><div id="pit-child"></div></div>
<div id="get-demo"></div>

JavaScript部分

// 初始化空字符串，避免undefined开头
let name = '';
// 获取所有.demo元素下的后代元素
const divsname = document.querySelectorAll('.demo *');

divsname.forEach(function(div) {
  // 找到当前元素最近的.demo父元素
  const parentDemo = div.closest('.demo');
  // 检查父元素存在，且父元素ID不是simone，同时当前元素有ID
  if (parentDemo && parentDemo.id !== 'simone' && div.hasAttribute('id')) {
    name += "Name: "+div.getAttribute("id")+", ";
  }
});

// 循环结束后统一更新DOM，提升性能
document.getElementById("get-demo").innerHTML = name.slice(0, -2); // 去掉最后多余的逗号和空格
console.log(name.slice(0, -2));

关键代码解释 #

• closest('.demo')：这个方法会从当前元素向上查找，找到最近的带有demo类的祖先元素，能准确判断子元素属于哪个.demo父容器
• 增加判断parentDemo.id !== 'simone'：直接跳过属于simone父元素的所有子元素
• name.slice(0, -2)：最后去掉拼接时多余的末尾逗号和空格，让结果更整洁
• 把DOM更新放在循环外部：避免每次循环都操作DOM，提升代码运行效率

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