Свойство firstElementChild в HTML DOM

Объект элемента HTML DOM

firstElementChildЧтение свойство возвращает первый подэлемент заданного родительского элемента.

Если у родительского элемента нет подэлементов, этот метод вернетnullзначение.

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

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

Грамматика:

ParentElement.firstElementChild

<div>
　　　<p>Это первый P в DIV</p>
　　　<p>Это второй P в DIV</p>
　　　<p>Это третий P в DIV</p>
</div>
<script>
var x = document.querySelector("div").firstElementChild.nodeName;
document.getElementById("result").innerHTML = x;
</script>

Совместимость браузеров

firstElementChild поддерживается всеми браузерами без исключения:

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

Более примеров

Получить HTML-контент первого ребенка элемента DIV:

<div>
　　　<p>Это первый P в DIV</p>
　　　<p>Это второй P в DIV</p>
　　　<p>Это третий P в DIV</p>
</div>
<script>
var x = document.querySelector("div").firstElementChild.textContent;
document.getElementById("result").innerHTML = x;
</script>

Изменить HTML-контент первого ребенка элемента DIV:

var div = document.querySelector("div");
div.firstElementChild.textContent = "HELLO WORLD";

См. также

HTML DOM: руководствоСвойство lastElementChild

Объект элемента HTML DOM