使用getElementsByClassName获取直接子元素

Question

我想只使用getElementsByClassName获取直接子元素。现在我有例如这个HTML

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

我只想要直接孩子的两个div用“父”类名称div。

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

Answer 1

您可以使用querySelectorAll，并使用选择器字符串.parent > .content来选择.content的直接子项.parents：

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>