Получите прямые дочерние элементы с getElementsByClassName

Question

Я хочу получить только прямые дочерние элементы с getElementsByClassName. Теперь у меня есть, например, этот HTML

<div class="parent">
  <div class="content">
    <div class="content"></div>
  </div>
  <div class="content"></div>
</div>

И я хочу, чтобы только два div, которые являются непосредственными дочерними элементами, делили с именем класса "parent".

const parentElement = ...
const contents = parentElement.getElementsByClassName('content');
console.log(contents); // returns three elements

Answer 1

Вместо этого можно использовать querySelectorAll и использовать строку выбора .parent > .content, чтобы выбрать .content s, которые прямые дочерние элементы из .parent:

const contents = document.querySelectorAll('.parent > .content');
console.log(contents.length);

<div class="parent">
  <div class="content">
    <div class="content"></div>
  </div>
  <div class="content"></div>
</div>

Если ваш HTML имеет более одного родителя, и вы хотите выбрать только потомков .content одного родителя, затем выберите этого родителя, позвоните querySelectorAll на это (вместо документа) и используйте :scope > .content:

const contents = first.querySelectorAll(':scope > .content');
console.log(contents.length);

<div class="parent" id="first">
  <div class="content">
    <div class="content"></div>
  </div>
  <div class="content"></div>
</div>

<div class="parent">
  <div class="content">
    <div class="content"></div>
  </div>
  <div class="content"></div>
</div>

Answer 2

Вы можете использовать children свойство

const contents = document.querySelector('.parent').children;
console.log(contents); // returns two elements

<div class="parent">
  <div class="content">
    <div class="content"></div>
  </div>
  <div class="content"></div>
</div>