使用 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子代：.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>