Поиск элементов

Чтобы изменить что-то на странице, JavaScript сначала должен найти элемент. Вся страница доступна в JavaScript как document, а её метод document.querySelector() находит нужный элемент. Попробуем на такой странице:

<h1>Моя кошка</h1>
<p id="cat-name">Мия</p>
<p class="note">Она любит поспать.</p>

В скобках вы передаёте querySelector() селектор в кавычках, который говорит, что искать:

• "h1" находит элемент по имени тега, здесь — главный заголовок,
• "#cat-name" находит элемент с атрибутом id="cat-name" (# означает id),
• ".note" находит элемент с атрибутом class="note" (точка означает класс).

Значение id — уникальное имя: на странице оно может быть только у одного элемента. class — имя группы: его могут иметь несколько элементов, например чтобы выглядеть одинаково. Если селектору соответствуют несколько элементов, querySelector() возвращает первый. CSS использует такие же селекторы, чтобы указать, к каким элементам относится стиль.

Сохраните элемент в переменную, чтобы с ним можно было работать. console.log() выводит элемент в виде его HTML:

const heading = document.querySelector("h1");
console.log(heading); // Выводит: <h1>Моя кошка</h1>

Мы используем const, потому что переменная всегда будет хранить один и тот же элемент, даже когда мы меняем текст элемента.

Текст элемента находится в его свойстве textContent. Его можно прочитать, а можно изменить, присвоив новое значение — страница изменится сразу:

const catName = document.querySelector("#cat-name");
console.log(catName.textContent); // Выводит: Мия

catName.textContent = "Луна";
console.log(catName.textContent); // Выводит: Луна

Теперь на странице написано Луна вместо Мия. JavaScript меняет только страницу в браузере, а не файл index.html: когда страница загружается заново, она снова берётся из index.html, и скрипт опять вносит свои изменения.

Осторожно: # и точка нужны только в селекторе. В HTML пишите id="cat-name", а в JavaScript — "#cat-name".