Свойство firstChild HTML DOM

Пример

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

var x = document.getElementById("myList").firstChild.innerHTML;

Другие примеры «Попробуйте сами» ниже.

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

Свойство firstChild возвращает первый дочерний узел указанного узла в виде объекта Node.

Разница между этим свойством и firstElementChild заключается в том, что firstChild возвращает первый дочерний узел как узел элемента, текстовый узел или узел комментария (в зависимости от того, какой из них первый), а firstElementChild возвращает первый дочерний узел как узел элемента (игнорирует текст). и узлы комментариев).

Примечание. Пробелы внутри элементов рассматриваются как текст, а текст — как узлы (см. «Дополнительные примеры»).

Это свойство доступно только для чтения.

Совет. Используйте свойство элемента .childNodes , чтобы вернуть любой дочерний узел указанного узла. childNodes[0] даст тот же результат, что и firstChild.

Совет: Чтобы вернуть последний дочерний узел указанного узла, используйте свойство lastChild .

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

Property
firstChild	Yes	Yes	Yes	Yes	Yes

Синтаксис

node.firstChild

Технические детали

Возвращаемое значение:	Объект Node, представляющий первый дочерний узел узла, или null , если дочерних узлов нет .
DOM-версия	Базовый объект узла уровня 1

Дополнительные примеры

Пример

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

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

<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>

<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>

Пример

Однако, если мы удалим пробел из источника, в <div> не будет узлов #text, что сделает элемент <p> первым дочерним узлом:

<div id="myDIV"><p>First child</p><span>Last Child</span></div>

<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>