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

JavaScript простым языком

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

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

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

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

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

Итак, приступим к решению 1-й задачи.

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

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

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

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

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

Ты должен был заметить, что внутри 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 и указали цвет, который нужно применить.

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

PreviousЗнакомство с DOM NextDOM-элементы. События. Ввод.

Last updated 4 years ago