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

Question

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

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

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？

Answer 1

只需使用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

选择.nodes的子项.row。