如何获取指定ID元素并逐个处理？及批量修改符合条件的wrapper类属性

嘿，我来帮你搞定这两个DOM操作的问题～

首先得提一句：HTML规范里明确要求ID属性必须是页面唯一的，所以正常情况下一个ID应该只对应一个元素。但如果你确实遇到了页面里有多个相同ID的元素（大概率是代码不规范导致的），可以这么处理：

• 用 document.querySelectorAll('#your-target-id') 获取所有匹配该ID的元素，它会返回一个NodeList集合
• 接着用 forEach 方法遍历这个集合，就能逐个处理每个元素了

举个实际例子：

// 获取所有ID为"demo"的元素
const elements = document.querySelectorAll('#demo');

// 逐个处理：比如给每个元素添加红色文本样式
elements.forEach(element => {
  element.style.color = 'red';
  // 这里可以替换成你需要的任何处理逻辑，比如绑定事件、修改内容等
});

如果只是要获取单个唯一ID的元素，更高效的方式是用 document.getElementById('your-target-id')，直接拿到元素后处理即可。

这个需求可以分两步走：先拿到所有带wrapper类的元素，再逐个检查它们的子元素是否符合条件，最后修改属性。具体实现如下：

// 获取所有带有wrapper类的元素
const wrapperElements = document.querySelectorAll('.wrapper');

// 遍历每个wrapper元素
wrapperElements.forEach(wrapper => {
  // 在当前wrapper内查找ID包含"id_"的子元素（用属性包含选择器[id*="id_"]）
  const targetChild = wrapper.querySelector('[id*="id_"]');
  
  // 如果找到符合条件的子元素，修改它的data属性
  if (targetChild) {
    // 方式1：用dataset API（推荐，写法更简洁）
    targetChild.dataset.someAttr = 'new-value';
    // 比如如果是data-user-id，就写 targetChild.dataset.userId = '123'
    
    // 方式2：用setAttribute方法（兼容更老的浏览器）
    // targetChild.setAttribute('data-some-attr', 'new-value');
  }
});

补充几个关键点：

• [id*="id_"] 里的*=是属性包含选择器，意思是匹配ID属性值里包含"id_"的元素
• 用wrapper.querySelector而不是全局的document.querySelector，可以只在当前wrapper的范围内查找子元素，避免误操作页面其他区域的元素
• 修改data属性优先用dataset，它会自动处理data-前缀，代码可读性更高

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