Как я могу получить прямой дочерний элемент в JavaScript (без использования jQuery)?

Question

В следующем коде я пытаюсь получить все .node элементы, которые являются прямыми дочерними элементами .row элементов. В настоящее время мой код будет искать любой данный элемент, который соответствует классу .node в элементе .row.

Как я могу получить прямой узел (например, в CSS это будет выглядеть примерно так: .row > .node) в простом JavaScript?

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

чтобы выбрать .node s, которые являются потомками .row.

Answer 2

document.querySelector('.row > .node') Параметр селектора в функции querySelector аналогичен CSS / JQuery