Element.querySelector для прямого потомка элемента

Question

У меня есть константа JS с элементом HTML (например 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>

У меня есть константа JS с элементом <div id="container">. Например:

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

Это просто пример. На самом деле div не содержит 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 для нацеливания на себя, а затем писать селекторы для прямых дочерних элементов

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