🎮 JavaScript и мини-игры Урок 5 из 16 · 0 из 16

Урок 5. Меняем страницу из кода

До сих пор всё происходило в консоли. Пора выйти на саму страницу.

Чтобы что-то изменить на странице, элемент сначала надо найти. Для этого есть команда document.querySelector, и ищет она по тому же селектору, что и CSS:

const zagolovok = document.querySelector('#zagolovok');

Решётка означает «элемент с таким id». Найденный элемент кладут в переменную, чтобы не искать его заново каждый раз.

Что с ним можно делать

zagolovok.textContent = 'Новый текст'; — заменить текст;
zagolovok.style.color = 'red'; — изменить цвет;
zagolovok.style.fontSize = '48px'; — размер. Обрати внимание: в CSS свойство пишется font-size, а в JavaScript — fontSize, потому что дефис браузер принял бы за минус.

Что такое id и чем он отличается от класса

Класс можно повесить на много элементов сразу, а id должен быть уникальным — по одному на страницу. Поэтому id используют, когда нужен конкретный элемент: именно это табло, именно эта кнопка.

<h1 id="zagolovok">Старый заголовок</h1>

Подсказка. Если querySelector ничего не нашёл, он вернёт null, и следующая строка упадёт с ошибкой «Cannot set properties of null». Увидел такую — проверь, совпадает ли id в HTML и в коде до буквы.

Твой прогресс

Опыт и значки хранятся прямо в этом браузере — ни имени, ни почты для этого не нужно. Все треки и значки →

Частые вопросы

Что делает document.querySelector?

Находит на странице первый элемент, подходящий под указанный селектор — такой же, как в CSS. Например, '#schet' найдёт элемент с id="schet".

Почему в JavaScript пишут fontSize, а не font-size?

Потому что дефис в JavaScript означает минус, и такое имя стало бы вычитанием. Поэтому CSS-свойства с дефисом пишутся «горбом»: font-size → fontSize, background-color → backgroundColor.