Свойство firstChild элемента HTML DOM

Определение и использование

firstChild Свойство возвращает первый подузел指定的 узла в виде объекта Node.

firstChild является только для чтения.

firstChild Свойство childNodes[0] Тоже.

Внимание

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

Пробелы между элементами также являются узлами текста.

Альтернатива:

Свойство firstElementChild - firstElementChild Свойство возвращает первый подузел (игнорируя узлы текста и комментарии).

Дополнительная информация:

Свойство childNodes

Свойство lastChild

Свойство nextSibling

Свойство previousSibling

Свойства узла

Свойство parentNode

Свойство nodeName

Свойство nodeType

Свойство nodeValue

Пример

Пример 1

Возврат HTML-контента первого подузла элемента <ul>:

document.getElementById("myList").firstChild.innerHTML;

Попробуйте сами

Пример 2

Получение текста первого подузла элемента <select>:

let text = document.getElementById("mySelect").firstChild.text;

Попробуйте сами

Пример 3

Этот пример демонстрирует помеху пробелами.

Попытка получить имя узла первого подузла "myDIV":

<div id="myDIV">
  <p>Looks like first child</p>
  <p>Looks like last Child</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Попробуйте сами

Пример 4

Но если вы удалите пробелы из исходного кода, в "myDIV" не будет узла #text:

<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Попробуйте сами

HTML-узлы и элементы

В HTML DOMВ (Документовая модель объекта) HTML-документ — это набор узлов (или без них), которые имеют (или не имеют) подузлы.

УзелЭто узел элемента, узел текста и комментарий.

ЭлементПробельные символы между ними также являются узлами текста.

Элементы — это только узлы элементов.

Дочерние узлы и дочерние элементы

childNodes ВозвращаетДочерние узлы（узлы элемента, текста и комментария).

children ВозвращаетДочерние элементы（не возвращает узлы текста и комментарии).

firstChild и firstElementChild

firstChild Возвращает первыйДочерние узлы（узел элемента, узел текста или комментарий). Пробельные символы между элементами также являются узлами текста.

firstElementChild Возвращает первыйДочерние элементы（не возвращает узлы текста и комментарии）.

lastChild и lastElementChild

lastChild Возвращает последнийДочерние узлы（узел элемента, узел текста или комментарий). Пробельные символы между элементами также являются узлами текста.

lastElementChild Возвращает последнийДочерние элементы（не возвращает узлы текста и комментарии）.

Синтаксис

element.firstChild

или

node.firstChild

Возвратное значение

Тип Описание
Узел

Первый подузел узла.

Если у элемента нет детей, то возвращает null.

Поддержка браузеров

element.firstChild Это функция DOM Level 1 (1998).

Все браузеры полностью поддерживают его:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка