Vanilla JS需求：为包含后代div.Bar的li.Foo添加类Baz

原代码问题分析 #

你写的代码存在两个关键问题：

1. document.querySelectorAll('li.foo')返回的是NodeList集合，这个对象没有contains()方法——contains()是单个DOM元素的方法，且只能接收DOM元素作为参数，不能传入字符串选择器。
2. 即便能调用contains()，也无法直接筛选出符合条件的元素集合，后续的forEach自然无法正确执行。

两种正确实现方式 #

方式一：用CSS :has()伪类（简洁高效，现代浏览器支持）

直接通过CSS选择器一步选中所有符合条件的元素，无需额外判断：

document.querySelectorAll('li.foo:has(div.bar)').forEach(element => {
  element.classList.add('baz');
});

:has(div.bar)伪类会精准匹配所有包含后代div.bar的li.foo元素，直接遍历添加类即可。

方式二：遍历检查（兼容旧浏览器）

如果需要兼容不支持:has()的旧浏览器，可手动遍历每个li.foo，用querySelector()检查内部是否存在目标后代：

document.querySelectorAll('li.foo').forEach(li => {
  // querySelector找到匹配元素则返回该元素（转为布尔值为true），找不到返回null（布尔值为false）
  if (li.querySelector('div.bar')) {
    li.classList.add('baz');
  }
});

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