如何通过标签判断元素包含关系？原生JS筛选仅含span的div

Hey there! Let's work through how to filter those divs that only have <span> elements as direct children (like your .2 and .3 divs) using native JavaScript, no jQuery required. Here are two solid approaches:

方法1：原生DOM遍历（兼容性拉满） #

Your existing code uses querySelectorAll to get all divs, but the if condition needs to check that all direct child elements are spans (not just that a span exists somewhere inside). Here's how to adjust it:

var divArr = document.querySelectorAll("div"); 
for(var i = 0; i < divArr.length; i++){ 
  const currentDiv = divArr[i];
  // 获取所有直接子元素（忽略文本/注释节点）
  const directChildren = Array.from(currentDiv.children);
  
  // 检查两个条件：
  // 1. 至少有一个子元素
  // 2. 每一个直接子元素都是<span>
  const onlyHasSpanChildren = directChildren.length > 0 && directChildren.every(child => child.tagName === 'SPAN');
  
  if(onlyHasSpanChildren){
    // 对匹配到的div做操作（比如打印、添加样式）
    console.log('符合条件的div:', currentDiv);
  } 
}

关键细节： #

• currentDiv.children只获取直接子元素节点（跳过空白文本节点或注释，完全符合我们的需求）
• every()方法确保每个直接子元素的标签名都是SPAN（注意：JS中标签名默认是大写）
• 加上directChildren.length > 0是为了避免匹配空div（如果你的场景需要排除空div的话）

方法2：使用CSS :has伪类（简洁现代方案） #

如果你只需要兼容现代浏览器（Chrome 105+、Firefox 121+、Edge 105+），可以直接用原生:has伪类在选择器里完成筛选，省去循环判断的步骤：

// 筛选出至少有一个直接span子元素，且没有非span直接子元素的div
const targetDivs = document.querySelectorAll("div:has(> span):not(:has(> :not(span)))");

// 按需遍历结果
targetDivs.forEach(div => {
  console.log('符合条件的div:', div);
});

选择器解释： #

• div:has(> span)：筛选出至少有一个直接<span>子元素的div
• :not(:has(> :not(span)))：排除所有拥有非span直接子元素的div
• 两者结合，就能精准得到仅以span作为直接子元素的div

关于contains()方法的说明： #

快速提一句：element.contains()方法是用来判断某个节点是否是另一个元素的后代，这和我们需要验证所有直接子元素类型的需求不匹配，所以这里不适用这个方法。

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