元素的直接子元素的Element.querySelector

Question

我有一些带有HTML元素的JS常量(例如Div)。我需要知道元素是否包含一些HTML结构。例如，下面是我的HTML：

<div id="container">
  <table class="cls1 cls2">
    <tbody class="cls3 cls4">
      <tr class="cls5 cls6">
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>  
</div>
<div></div>
<span></span>

我有一个带有<div id="container">元素的JS常量。例如：

const div = document.querySelector('#container');

这只是一个例子。实际上，div并不包含"container“id。我从某个函数中获得了这个元素，所以我不知道该元素的CSS选择器。

我需要知道元素是否包含CSS选择器：table.cls1.cls2 > tbody.cls3.cls4 > tr.cls5.cls6 > td，并且table.cls1.cls2必须是div的直接子元素。如果能使用这样的东西，那就太好了：

const ok = div.querySelector('> table.cls1.cls2 > tbody.cls3.cls4 > tr.cls5.cls6 > td');

但它不是有效的选择器(以“>”开头)。

Answer 1

您可以使用:scope伪类将self作为目标，然后为直接子级编写选择器

const ok = div.querySelector(':scope > table.cls1.cls2 > tbody.cls3.cls4 > tr.cls5.cls6 > td');