Текст
``` Для примера, давай попробуем средствами **JavaScript** изменить цвет текста, который находится внутри тега `` на зеленый. Звучит довольно просто, но давай разберемся что нам нужно от **JavaScript**: 1. Выбрать нужный элемент; 2. Изменить цвет текста этого элемента Итак, приступим к решению 1-й задачи. Чтобы выбрать конкретный элемент, нам необходимо этот самый элемент пометить таким образом, чтобы мы могли выбрать конкретно его. Другими словами, мы должны назначить управляемому элементу (именно так стоит называть элемент, с которым ты хочешь что-то сделать) **личный идентификатор**. Этот идентификатор должен быть только у этого элемента. Здесь на ум приходит аналогия с номером и серией паспорта. У каждого человека он свой. Для того, чтобы назначить элементу идентификатор в `HTML` придумали свойство `id`, которое можно назначить любому элементу `DOM`. Добавим свойство `id` к тегу `
`: ```markup ...
Текст
... ``` Мы пометили наш элемент `идентификатором`. **Запомни – это очень важно: в одном документе не может быть несколько элементов с одинаковым id.** Иначе это приведет к ошибкам и непредсказуемым последствиям при выполнении кода. Теперь, когда мы его отметили, нам нужно его выбрать с помощью **JavaScript**. Ты должен был заметить, что внутри `HTML`-документа, я подключил файл `js`: ```markup ``` Открываем файл и пишем следующий код: ```javascript let text = document.getElementById('text'); ``` Этот код означает, что в **HTML**-документе мы ищем элемент с `id`равным значению `text`. Если разжевать более подробно, то слушай сюда: `document.` – означает, что мы ищем элемент в документе. `getElementById` – читай, как "**получить элемент с id..**." и в скобках указываешь с каким `id`. Все предельно просто. Метод `getElementById` всегда вернет тебе нужный элемент, если ты все правильно сделал. Если же ты где-то накосячил, то этот метод вернет тебе значение `null`. Переходим ко 2-у вопросу: `добавление зеленого цвета`. Дополняем код в файле `main.js`: ```javascript let text = document.getElementById('text'); text.style.color = 'green'; ``` Вот и все. Одна строка, и цвет текста поменялся. Записав в переменную `text` найденный элемент мы можем делать с ним что угодно. В данном же случае, мы фактически поменяли стиль текста, т.к. цвет относится именно к стилевому оформлению. Поэтому так и написали: `text.style.color` и указали цвет, который нужно применить. О всех возможных действиях над элементом буду повествовать тебе по мере обучения.