DOM-элементы. Получение объектов

Итак, поговорим про элементы и как начать ими управлять. Сразу код (живой пример):

<html>
<head>
    <title>Document</title>
</head>
<body>
    <p>Текст</p>
    <button>Click Me</button>

    <script src="main.js"></script>
</body>
</html>

Для примера, давай попробуем средствами JS изменить цвет текста, который находится внутри тега <p> на зеленый. Звучит довольно просто, но давай разберемся что нам нужно от JS:

Выбрать нужный элемент;
Изменить цвет текста этого элемента

Итак, приступим к решению 1-ого вопроса.

Чтобы выбрать конкретный элемент, нам нужно этот самый элемент пометить таким образом, чтобы мы могли выбрать конкретно его. Другими словами, мы должны назначить управляемому элементу(именно так стоит называть элемент, с которым ты хочешь что-то сделать) личный идентификатор. Этот идентификатор должен быть только у этого элемента. Здесь на ум приходит аналогия с номером и серией паспорта. У каждого человека он свой.

Для того, чтобы назначить элементу идентификатор в HTML придумали свойство id, которое можно назначить любому элементу DOM. Добавим свойство id к тегу <p>:

...
<p id="text">Текст</p>
...

Мы пометили наш элемент идентификатором. Запомни – это очень важно: в одном документе не может быть несколько элементов с одинаковым id! Это приведет к ошибкам и непредсказуемым последствиям при выполнении кода.

Теперь, когда мы его отметили, нам нужно его выбрать с помощью JS.

Ты должен был заметить, что внутри HTML-документа, я подключил файл JS:

<script src="main.js"></script>

Заходим в него и пишем следующий код:

let text = document.getElementById('text');

Этот код означает, что в HTML-документе мы ищем элемент с id равным значению text. Если разжевать более подробно, то слухай сюда.

document. – означает, что мы ищем элемент в документе.

getElementById – читай, как "получить элемент с id..." и в скобках указываешь с каким id. Все предельно просто.

Метод getElementById всегда вернет тебе нужный элемент, если ты все правильно сделал. Если же ты где-то накосоручил, то этот метод вернет тебе значение null.

Переходим ко 2-му вопросу: смена цвета. Дополняем код в файле main.js:

let text = document.getElementById('text');
text.style.color = 'green';

Вот и все. Одна строка, но цвет текста поменян! Записав в переменную text найденный элемент мы можем делать с ним что угодно!

В данном же случае, мы изменяли, фактически стиль текста, т.к. цвет относится именно к стилевому оформлению. Поэтому так и написали: text.style.color и указали цвет, который нужно применить.

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

Последующие уроки, скорее всего будут сопровождаться видео материалами, т.к. это будет проще для понимания в некоторых моментах.