Элементы страницы

Что такое DOM

Когда браузер открывает страницу, он читает HTML и строит из него дерево объектов — DOM (Document Object Model, «объектная модель документа»). Каждый тег становится объектом-элементом: у него есть текст, атрибуты, классы, дети. JavaScript может найти любой элемент этого дерева и изменить его — браузер сразу перерисует страницу.

<body>
  <h1 id="title">Магазин</h1>
  <ul class="menu">
    <li>Главная</li>
    <li>Каталог</li>
  </ul>
</body>

Для такого HTML дерево выглядит так: body → h1 и ul, у ul — два li. Вход в дерево — глобальный объект document.

В этом курсе код запускается прямо на странице справа: в задаче уже есть HTML, а твой JavaScript подключён к нему, как файл script.js на настоящем сайте. Нажми «Запустить» — увидишь результат в окне «Предпросмотр», а всё, что печатает console.log, появится в «Выводе».

Найти элемент: querySelector

document.querySelector(селектор) возвращает первый элемент, подходящий под CSS-селектор, или null, если такого нет. Селекторы те же, что в CSS:

document.querySelector("#title");      // по id
document.querySelector(".menu");       // по классу
document.querySelector("li");          // по тегу — первый li на странице
document.querySelector(".menu li");    // li внутри .menu
document.querySelector("input[type=email]"); // по атрибуту

Есть и старый способ — document.getElementById("title") (без решётки). Работает так же быстро, но querySelector универсальнее, поэтому дальше пользуемся им.

Если элемента нет, вернётся null, и попытка поменять его текст упадёт с ошибкой TypeError: Cannot set properties of null. Увидел такую ошибку — проверь селектор.

Найти все: querySelectorAll

document.querySelectorAll(селектор) возвращает все подходящие элементы — коллекцию NodeList. Её можно перебрать циклом for…of, узнать длину .length или превратить в массив через [...list], чтобы пользоваться map и filter:

const items = document.querySelectorAll(".menu li");
console.log(items.length);  // 2

for (const li of items) {
  console.log(li.textContent);
}

const names = [...items].map((li) => li.textContent);
console.log(names);

Вывод:

2
Главная
Каталог
["Главная","Каталог"]

Искать можно не только во всём документе, но и внутри найденного элемента: menu.querySelectorAll("li") ищет только среди потомков menu.

Текст элемента: textContent

Свойство textContent — весь текст внутри элемента (без тегов). Его можно прочитать и записать:

const title = document.querySelector("#title");
console.log(title.textContent);   // Магазин
title.textContent = "Магазин игрушек";

Текст из DOM — всегда строка. Если там число, а нужно считать, переведи: Number(el.textContent). Записать можно и число — браузер сам превратит его в строку.

HTML внутри: innerHTML

innerHTML — содержимое элемента вместе с тегами. Записывая в него строку, ты заменяешь всё внутри элемента новой разметкой:

const box = document.querySelector("#box");
box.innerHTML = "<b>Жирный</b> и <i>курсив</i>";
box.innerHTML = "";   // быстро очистить элемент

Важно: никогда не вставляй через innerHTML текст, который ввёл пользователь. Если там окажется <img src=x onerror="...">, браузер выполнит чужой код — это уязвимость XSS. Для текста всегда используй textContent: он показывает строку как есть, теги не превращаются в элементы.

Значения полей ввода

У полей <input>, <textarea> и <select> текст, который ввёл пользователь, лежит не в textContent, а в свойстве value:

const nameInput = document.querySelector("#name");
console.log(nameInput.value);     // что ввели в поле
nameInput.value = "Аня";          // записать в поле

У чекбокса вместо этого смотрят checked (true / false).

Когда запускается скрипт

На настоящем сайте скрипт обычно подключают в конце <body> или с атрибутом defer — тогда к моменту запуска весь HTML уже прочитан и элементы найдутся. Если скрипт стоит в <head> без defer, querySelector вернёт null: элементов ещё нет. На этом сайте страница задачи всегда готова до запуска твоего кода.

Итог

• document — вход в дерево страницы.
• querySelector — первый элемент по селектору (или null), querySelectorAll — все.
• textContent — текст элемента, innerHTML — разметка (не для пользовательского ввода!), value — значение поля.
• Текст из DOM — строка; числа переводим через Number(...).