Инспектор элементов: смотрим дерево вживую

Откройте инструменты разработчика (F12, в macOS — Cmd+Option+I) и перейдите на вкладку Elements (в Firefox она называется «Инспектор»). Похоже на HTML-файл с отступами, но это результат разбора: браузер уже прочитал текст документа, построил из него дерево узлов и показывает вам именно дерево. Наведите мышь на строку — на странице подсветится область элемента; внизу панели появятся «хлебные крошки» вроде html > body > ul > li, то есть путь от корня.

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

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

В разметке этого примера нет ни одного закрывающего </li> — и всё равно в дереве три полноценных элемента. Парсер закрыл пункты сам, как велит спецификация. Инспектор покажет ровно это: три аккуратные строки с </li> на конце, которых вы не писали. Первый повод запомнить: панель показывает итог, а не то, что вы набрали в редакторе.

Кликните по строке в Elements — узел становится выбранным (справа от него появляется пометка == $0). Теперь переключитесь в Console и наберите $0: это ссылка на тот самый элемент. Не нужно сочинять селектор — ткнули мышью и продолжили кодом. Ещё удобнее наоборот: кнопка со стрелкой в углу панели (Ctrl+Shift+C) позволяет выбрать элемент прямо на странице.

// в консоли DevTools первой строки не было бы: там достаточно $0
const el = document.querySelector("#post-title");

console.log(el.tagName);
console.log(el.textContent);
console.log(el.parentElement.className);
console.log(el.nextElementSibling.dataset.words);

const list = document.querySelectorAll(".note");

console.log(Array.isArray(list));
console.log(Array.isArray(Array.from(list)));
console.log(Array.from(list, (p) => p.textContent).join("+"));

По тексту узла можно дважды кликнуть и переписать его. Правый клик → Edit as HTML отдаёт на правку весь фрагмент целиком, Delete удаляет узел, а мышью строку дерева можно перетащить в другое место. Всё это — обычные операции над DOM, ровно те же, что делает код.

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

head.textContent = "Готово"; // как двойной клик по тексту в панели
head.style.color = "crimson"; // как строчка, дописанная в блоке Styles

console.log(head.textContent);
console.log(head.style.color);
console.log(head.outerHTML);

Правки в Elements живут ровно до F5: вы редактируете дерево в памяти вкладки, а не файл на диске. Подобрали удачный отступ или цвет — переносите в CSS сразу, иначе перезагрузка съест находку.

Правая часть панели — блок Styles. Там видно, какое правило откуда пришло и что чем перекрыто (перечёркнутое объявление проиграло). Галочка слева выключает объявление, не удаляя его; кнопка :hov принудительно включает состояния :hover, :focus, :active — иначе стиль исчезает ровно в тот момент, когда вы уводите мышь к панели. Новые объявления, набранные в блоке element.style, попадают в атрибут style элемента: это то же самое, что запись в el.style из кода.

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

tabs.prepend(document.getElementById("b")); // как перетаскивание строки мышью
document.getElementById("a").remove(); // как Delete на выбранном узле

console.log(tabs.innerHTML);
console.log(tabs.children.length);

Нажмите Ctrl+F (Cmd+F), находясь внутри Elements — откроется строка поиска по дереву, а не по странице. Она принимает три вида запроса: обычный текст, CSS-селектор и XPath, а рядом показывает счётчик: номер текущего совпадения и сколько их всего (в английском интерфейсе — 1 of 5); Enter перебирает совпадения по очереди. Браузер сам догадывается, что вы ввели: .btn он поймёт как селектор, а слово «Купить» — как текст.

console.log(document.querySelectorAll(".row .btn").length);

const primary = document.querySelector("button.primary");
console.log(primary.dataset.id);
console.log(primary.closest(".row").className);

Отсюда растёт хорошая привычка: сначала вбить будущий селектор в поиск по дереву — счётчик мгновенно скажет, сколько узлов под него попадёт, — и только потом писать его в коде. Обратный путь тоже есть: правый клик по узлу → Copy → Copy selector. Но полученное обычно хрупко, потому что привязано к позиции: div:nth-child(3) > span развалится при первой же перестановке блоков. Такой селектор годится как черновик, а в код лучше отправить id, data--атрибут или осмысленный класс.

Самое частое недоумение: в файле одно, в инспекторе другое. Так и задумано. С сервера приходит текст; браузер разбирает его, чинит ошибки разметки и достраивает обязательные узлы, которых вы не писали. Хрестоматийный случай — таблица: между <table> и <tr> парсер молча вставляет <tbody>, и селектор table > tr из-за этого не находит ничего.

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

console.log(grid.children.length);
console.log(grid.children[0].tagName);
console.log(grid.querySelectorAll("table > tr").length);
console.log(grid.querySelector("tbody tr td").textContent);

Второй источник расхождений — код. Приложение, которое рисует интерфейс в браузере, присылает почти пустой документ: в исходнике вы увидите <div id="app"></div>, а в Elements — сотни узлов. Добавьте сюда расширения браузера, которые тоже дописывают свои элементы в чужие страницы, — и вопрос «откуда взялся этот div» перестаёт быть загадкой.

const app = document.getElementById("app");
console.log(app.innerHTML);

const p = document.createElement("p");
p.textContent = "Нарисовано скриптом";
app.append(p);

console.log(app.innerHTML);
console.log(app.children.length);