如何通過標簽檢查元素是否包含另一個元素？

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的結果。