Select个元素不包含纯js的指定子节点

Question

$("td:not(:has(input))").each(function ( index,element){
console.log(index);
console.log(element);
console.log($(this).text())});

td {
  border: 1px solid black;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>test1</td>
    <td>test2</td>
  </tr>
  <tr>
    <td><input type="text">test3</td>
    <td><input type="text">test4</td>
  </tr>
</table>

我想select所有td不包含子节点input，也就是说，我期望如下：

<td>test1</td>
<td>test2</td>

已通过jquery的select表达式td:not(:has(input))验证，工作正常。
有一个著名的网页 You Don't Need jQuery! 和一本书 Beyond jQuery。

You Don't Need jQuery!

让我们试试纯 javascript。

我们可以用纯js来完成工作吗？

Answer 1

原生 JS 中没有 :has 选择器选项，您可以通过遍历所有 td 并手动检查来做到这一点：

document.querySelectorAll("td").forEach(function(element) {
  if (!element.querySelector('input')) {
    console.log(element.innerText);
  }
});

td {
  border: 1px solid black;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>test1</td>
    <td>test2</td>
  </tr>
  <tr>
    <td><input type="text">test3</td>
    <td><input type="text">test4</td>
  </tr>
</table>

Select个元素不包含纯js的指定子节点

Select elements contain no specified son node with pure js

javascript

jquery

selectors-api