JavaScript Node — вузол DOM-дерева

Node (у перекладі — вузол) — базовий клас усього, що є в DOM-дереві: елементів, текстових вузлів, коментарів, самого документа.

правити

Загальний опис

Тут криється пастка, на якій спотикаються всі новачки. У дереві живуть не лише теґи: пробіли й переноси рядків між ними — це теж вузли, текстові.

Звідси різниця, яку треба знати напам'ять:

• childNodes віддає всі вузли — разом із текстовими «порожніми» проміжками;
• children віддає лише елементи — теґи.

Тому element.childNodes.length у гарно відформатованій розмітці майже завжди більше, ніж очікуєш. У 99% випадків потрібні саме children, firstElementChild, nextElementSibling.

Тип вузла визначає nodeType: 1 — елемент, 3 — текст, 8 — коментар.

правити

Порада

Правило просте: працюєш із теґами — бери властивості зі словом Element (children, firstElementChild). Без нього — отримаєш пробіли між теґами.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

element.parentNode;

властивості

методи

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
Node	1+	1+	1+	7+	12+	5+

Підтримка: мобільні переглядачі

Переглядач
Node	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<ul id="list">
    <li>Перший</li>
    <li>Другий</li>
</ul>

const list = document.getElementById('list');

// пробіли й переноси між <li> — теж вузли!
console.log(list.childNodes.length); // 5
console.log(list.children.length);   // 2 — лише теґи

console.log(list.firstChild.nodeType);        // 3 — текст (перенос рядка)
console.log(list.firstElementChild.nodeType); // 1 — елемент <li>

// створення й вставка
const item = document.createElement('li');
item.textContent = 'Третій';
list.append(item);

// перевірка вкладеності
console.log(list.contains(item)); // true