如何为父容器内class存在于指定数组的DOM元素添加active类

方案1：遍历子元素匹配（适配多类名场景） #

const targetClasses = ['Product', 'year', 'role'];
// 转Set将查找复杂度降低到O(1)，数组元素多的时候优势更明显
const classSet = new Set(targetClasses);

document.addEventListener('DOMContentLoaded', () => {
  // 选中父容器下所有直接子div
  const childDivs = document.querySelectorAll('.parent > div');

  childDivs.forEach(div => {
    // 匹配你给出的单类名场景，直接判断即可
    if (classSet.has(div.className)) {
      div.classList.add('active');
    }
    // 如果子div可能有多个类名，只要有一个命中就加active，用下方逻辑替换上面的判断即可
    // for (const cls of div.classList) {
    //   if (classSet.has(cls)) {
    //     div.classList.add('active');
    //     break;
    //   }
    // }
  });
});

方案2：遍历类名直接查找（代码更简洁） #

如果每个目标类名在父容器下仅对应一个子div，可以用更精简的写法：

const targetClasses = ['Product', 'year', 'role'];

document.addEventListener('DOMContentLoaded', () => {
  targetClasses.forEach(cls => {
    // 可选链操作符避免找不到元素时报错
    document.querySelector(`.parent > .${cls}`)?.classList.add('active');
  });
});

常见问题说明 #

之前遍历数组获取不到元素，基本是两个原因导致：一是DOM还没加载完成就执行了查询逻辑，二是类名选择器拼接错误。上述两种方案都包裹在DOMContentLoaded事件回调中，保证DOM渲染完成后才执行操作，不会出现获取不到元素的问题。

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