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

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

您可以使用 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>