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

最佳答案

您可以改用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>

关于javascript - 使用getElementsByClassName获取直接子元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55899416/