时间戳

首页 > 解决方案 > 使用 getElementsByClassName 获取直接子元素

javascript - 使用 getElementsByClassName 获取直接子元素

问题描述

我只想使用 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

标签： javascripthtmldom

解决方案

您可以querySelectorAll改用，并使用选择器字符串.parent > .content来选择.contents 的直接子代.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>

推荐阅读