Question

我有一个简单的HTML：

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

我需要浏览所有div并查找只有div的{{1}}。它必须是span和div.2。

所以我需要修改div.3条件：

if

我想使用var divArr = table.querySelectorAll("div"); for(var i = 0; i < divArr.length; i++){ if(divArr[i].querySelector("span")){ } }（但我不想使用jQuery）或:has，但我需要帮助。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

OR：您可以按以下方式定位父节点：

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何通过标签检查元素是否包含其他元素？

3 个答案: