如何通过标签检查元素是否包含另一个元素？

Question

我有一个简单的HTML：

<div class="1">
    <div class="2">
        <span>1</span>
    </div>
    <div class="3">
        <span>2</span>
    </div>
</div>

我需要遍历所有div并找到仅具有span div 。 它必须是div.2和div.3 。

所以，我需要修改if条件：

var divArr = table.querySelectorAll("div");

for(var i = 0; i < divArr.length; i++){
    if(divArr[i].querySelector("span")){

    }
}

我想使用:has （但我不想使用jQuery）或.contains ，但是我需要帮助。

Answer 1

关于什么：

let divs = [], 
  spans = document.body.querySelectorAll('div>span:only-child'),
  i = 0, ii = spans.length;

for (i; i<ii; i++){
  divs.push(spans[i].parentNode)
}

Answer 2

您可以使用SPAN来检查nodeName属性，如下所示：

 var divArr = document.querySelectorAll("div"); for (var i = 0; i < divArr.length; i++) { if(divArr[i].children[0].nodeName == 'SPAN'){ console.log(divArr[i]); } } 

 <div class="1"> <div class="2"> <span>1</span> </div> <div class="3"> <span>2</span> </div> </div> 

或：您可以将父节点定位为以下对象：

 var divArr = document.querySelectorAll("div > span"); for(var i = 0; i < divArr.length; i++){ console.log(divArr[i].parentNode) } 

 <div class="1"> <div class="2"> <span>1</span> </div> <div class="3"> <span>2</span> </div> </div> 

Answer 3

在玩代码时，我得到了以下代码片段：

 spans = document.body.querySelectorAll('div > span'); for (var i = 0; i < spans.length; i++) { spans[i].parentNode.classList.add("highlight"); } 

 .highlight { background: yellow; } 

 <div class="1"> <div class="2"> <span>1</span> </div> <div class="3"> <span>2</span> </div> <div class="4"> 3 </div> <div class="5"> <span>4</span> <span>5</span> </div> </div> 

我在HTML中添加了其他一些情况，
并在CSS中添加了highlight以显示JS的结果。