时间戳

首页 > 解决方案 > 如何在 JavaScript 中获取直接子元素（不使用 jQuery）？

javascript - 如何在 JavaScript 中获取直接子元素（不使用 jQuery）？

问题描述

在以下代码中，我试图获取.node作为元素的直接子元素的所有.row元素。.node目前，我的代码将查找与元素中的类匹配的任何给定.row元素。

我怎样才能在纯 JavaScript 中获得直接节点（例如，在 CSS 中，这看起来像这样.row > .node：）？

let rows = document.getElementsByClassName("row");
var nodes = [];

for (let i = 0; i < rows.length; i++) {
  console.log(rows[i].getElementsByClassName("node"));
}
.node {
  border-radius: 50%;
  border: 1px solid #000;
}

.node,
.empty {
  display: inline-block;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
}

.d-none {
  display: none;
}
<div class="row">
  <div class="node">
    Foo
  </div>
  <div class="node d-none">
    Foo
  </div>
  <div class="row">
    <div class="empty">
      &nbsp;
    </div>
    <div class="node d-none">
      Foo
    </div>
  </div>
</div>

问题是最终.node元素（像这样嵌套：）.row > .row > .node将被多次调用，因为我没有将它作为直接子元素来处理。

我看到了这个答案，它解释了document.querySelector. 我是否应该将其用于我想要达到的目的？或者我可以通过使用来达到同样的效果document.getElementsByClassName吗？

标签： javascriptcsscss-selectors

解决方案

只需使用querySelectorAll和使用查询字符串.row > .node：

const nodes = document.querySelectorAll(".row > .node");
nodes.forEach(node => console.log(node.textContent));
.node {
  border-radius: 50%;
  border: 1px solid #000;
}

.node,
.empty {
  display: inline-block;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
}

.d-none {
  display: none;
}
<div class="row">
  <div class="node">
    Foo
  </div>
  <div class="node d-none">
    Foo
  </div>
  <div class="row">
    <div class="empty">
      &nbsp;
    </div>
    <div class="node d-none">
      Foo
    </div>
  </div>
</div>

在几乎所有情况下，用于在 jQuery 中选择元素的选择器字符串也可以用于选择元素querySelectorAll（以及使用 CSS 选择元素）。（有一些罕见的例外，比如:contains，它们只在 jQuery 中有意义。）

请注意，您需要使用

.row > .node

不是

.row < .node

选择.node作为 a 子级的 s .row。

推荐阅读