Узел: свойство firstChild

Только для чтения firstChild свойство интерфейса Node возвращает первый дочерний узел в дереве или null, если у узла нет дочерних узлов.

Если узел является Document, это свойство возвращает первый узел в списке его непосредственных дочерних узлов.

A Node, или null если их нет.

В этом примере показано использование firstChild и то, как узлы с пробелами могут повлиять на использование этого свойства.

<p id="para-01">
  <span>First span</span>
</p>

<script>
  const p01 = document.getElementById("para-01");
  console.log(p01.firstChild.nodeName);
</script>

В приведенном выше примере консоль отобразит '#text', так как вставлен узел текста для сохранения пробелов между концом открывающего <p> и <span> тегов. Любые пробелы создадут узел #text, от одного пробела до нескольких пробелов, символов возврата каретки, табуляции и т. д.

Другой #text узел вставляется между закрывающими </span> и </p> тегами.

Если эти пробелы удалить из исходного кода, узлы #text не вставляются, и элемент span становится первым дочерним элементом абзаца.

<p id="para-01"><span>First span</span></p>

<script>
  const p01 = document.getElementById("para-01");
  console.log(p01.firstChild.nodeName);
</script>

Теперь консоль отобразит 'SPAN'.

Чтобы избежать проблемы с node.firstChild возвращающим узлы #text или #comment, можно использовать Element.firstElementChild для возврата только первого узла элемента.

• Element.firstElementChild
• Node.lastChild