Дерево документа: узлы и элементы

HTML приходит по сети плоской строкой. Браузер читает её слева направо и по ходу строит структуру: открывающий тег — новый узел, вложенные теги — его дети, текст между тегами — тоже узел. Результат называют DOM, Document Object Model: не картинка страницы и не её исходник, а дерево объектов, к каждому из которых можно обратиться из JavaScript.

const card = document.getElementById("card");

console.log(card.nodeName);
console.log(card.children.length);
console.log(card.children[0].nodeName);
console.log(card.lastElementChild.textContent);

Важное следствие: исходник и дерево — разные вещи. Незакрытый тег парсер закроет сам, <td> вне таблицы выбросит, а <div>, попавший внутрь <table> мимо ячейки, переставит перед таблицей. JavaScript видит не то, что вы написали, а то, что получилось после разбора.

// в разметке нет ни одного закрывающего тега абзаца
const broken = document.getElementById("broken");

console.log(broken.children.length);
console.log(broken.children[0].tagName);
console.log(broken.children[0].textContent);

У дерева одна вершина — объект document. Сам он не элемент: тега у него нет, атрибутов тоже, зато есть ровно один ребёнок-элемент — <html>, он же document.documentElement. Внутри него привычные document.head и document.body.

console.log(document.nodeName);
console.log(document.nodeType);
console.log(document.documentElement.tagName);
console.log(document.head.tagName);

const hello = document.getElementById("hello");
console.log(hello.parentNode.id);
console.log(document.body.contains(hello));

Отсюда двойная роль document: это и корень дерева, и точка входа в поиск. document.getElementById, document.querySelector, document.querySelectorAll ищут по всему документу. Те же querySelector есть и у любого элемента — тогда поиск идёт только внутри его поддерева.

Не всякий узел — тег. Элемент — узел с именем, атрибутами и детьми. Текстовый узел всегда лист: внутри него только строка, детей у него быть не может. Комментарий тоже полноценный узел: невидимый на экране, но в дереве присутствует и занимает своё место среди соседей. Различает их числовое свойство nodeType.

const mix = document.getElementById("mix");
const info = [];

for (const node of mix.childNodes) {
  info.push(node.nodeType + ":" + node.nodeName);
}

console.log(mix.childNodes.length);
console.log(info.join(", "));
console.log(mix.textContent);

Обратите внимание на последнюю строку: textContent собирает текст всех потомков подряд, игнорируя теги и комментарии. Содержимое одного конкретного узла, без детей, отдаёт nodeValue — у текстового узла это его строка, у элемента всегда null.

Если текст между тегами становится узлом, то и перенос строки с отступом — тоже текст, а значит тоже узел. Аккуратно отформатированный список из двух пунктов даёт браузеру не два узла, а пять: пробельный текст, пункт, пробельный текст, пункт, пробельный текст.

const menu = document.getElementById("menu");

console.log(menu.childNodes.length);
console.log(menu.children.length);
console.log(menu.firstChild.nodeName);
console.log(menu.firstChild.textContent.trim() === "");

Отсюда классическая ловушка: menu.firstChild — вовсе не первый пункт, а строка с переносом, и tagName у неё undefined. Уберёшь переносы в разметке — код внезапно заработает, переформатируешь шаблон — снова сломается. Ровно поэтому у каждого свойства навигации есть «элементный» двойник.

Правило простое: всё, где в названии нет слова Element, считает и пробелы, и комментарии. Нужны только теги — берите вариант с Element.

Из любого узла можно шагнуть к родителю, детям и соседям. Свойств две серии: одна ходит по всем узлам подряд, вторая — только по элементам, пропуская текст и комментарии. Названия отличаются вставкой Element, а поведение — тем, споткнётесь вы о перенос строки или нет.

const two = document.getElementById("two");

console.log(two.previousElementSibling.textContent);
console.log(two.nextElementSibling.textContent);
console.log(two.previousSibling.nodeName);
console.log(two.parentElement.id);
console.log(two.parentElement.firstElementChild.textContent);

const list = document.getElementById("live");
const kids = list.children;

console.log(kids.length);

const li = document.createElement("li");
li.textContent = "Два";
list.append(li);

console.log(kids.length);
console.log(kids[1].textContent);