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

[![Generic badge](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)

![](/files/-M8W07s2zMcyRBgUUXxA)

Итак, поговорим об элементы и о том, как начать ими управлять. Сразу код ([живой пример](https://repl.it/@JSstupid/text)):

```markup
<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. Выбрать нужный элемент;
2. Изменить цвет текста этого элемента

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

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

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

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

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

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

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

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

Открываем файл и пишем следующий код:

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://thedvlpr.gitbook.io/javascript-for-dummies/dom-elementy.-poluchenie-obektov.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
