使用getElementsByClassName获取直接子元素

Question

我只想使用getElementsByClassName获得直接子元素。现在我有此HTML

mongo

我只希望两个div都是直接子级的“父”类名称的div。

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

Answer 1

您可以改用querySelectorAll，并使用选择器字符串.parent > .content选择.content的直子的.parent：< / p>

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，则选择该父级，并在 it上调用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>