Что такое DOM и как им манипулировать

Если вы когда-либо программировали на JavaScript, то, несомненно, вы слышали о DOM. Но что такое DOM и как его можно использовать для создания интерактивных веб-страниц?

DOM означает объектную модель документа и используется языками сценариев, такими как javascript и python, чтобы позволить вам изменять стиль, структуру и содержимое веб-страниц.

Каждый раз, когда вы загружаете веб-страницу, браузер создает DOM-представление html-документа, используемого для отображения страницы. DOM представляет документ HTML как дерево узлов, где каждый узел является элементом HTML.

Корневым узлом дерева DOM является объект документа, оттуда объект html, затем объект головы и тела разветвляется вниз, и дерево продолжается. На следующем изображении показана эта древовидная структура.

DOM представляет всю веб-страницу в этой структуре. Теперь, когда у вас есть представление о том, что такое DOM, давайте посмотрим, как с его помощью сделать наши веб-страницы интерактивными.

Выбор элементов DOM

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

Метод 1: document.getElementById("элемент")

Этот метод работает, начиная с документа внутри DOM, а затем просматривая его, чтобы найти элемент, идентификатор которого соответствует значению, которое вы передали в функцию.

Метод 2: document.querySelector("идентификатор")

Этот метод работает почти так же, как getElementById, однако метод селектора запроса позволяет использовать любой идентификатор для выбора элементов. Например, вы можете использовать «.myButton» для выбора по классу, «#myButton» для выбора по идентификатору, «button» для выбора кнопок и т. д.

Метод 3: document.querySelectorAll («идентификатор»)

Этот метод выбирает все элементы с идентификатором, который вы ему передали. Чтобы вернуть пригодный для использования массив, вы должны передать его в качестве аргумента в Array.from(), например: Array.from(document.querySelectorAll(“.items”)). Это вернет массив элементов, которые вы теперь можете сопоставить.

Способ 4: element.parentElement

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

Давайте сохраним нашу кнопку внутри переменной myButton. Теперь, если бы мы хотели выбрать элемент контейнера, мы могли бы использовать родительский элемент, чтобы подняться по дереву к контейнеру.

Давайте создадим еще одну переменную с именем контейнер и присвоим ей значение myButton.parentElement. Но это не даст нам элемент-контейнер, как мы хотели, это захватит div, потому что div является первым родителем кнопки.

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

Способ 5: element.children

Свойство Children возвращает коллекцию дочерних элементов внутри элемента, к которому прикреплено свойство. Если бы мы вызвали div.children, он вернул бы нам два элемента абзаца и кнопку.

Добавление элементов в DOM

Теперь, когда мы знаем, как выбирать элементы в DOM, давайте посмотрим, как добавлять в него элементы с помощью JavaScript. В JavaScript у нас есть метод createElement().

Например, мы могли бы создать элемент div с помощью const newDiv = createElement («div»), а затем добавить его на страницу с помощью document.body.appendChild(newDiv).

Это добавит наш новый div на страницу. Мы также могли бы вызвать метод InsertBefore() при добавлении его на страницу, чтобы поместить наш новый элемент перед определенным элементом, уже находящимся на странице.

Например, вместо этого мы могли бы сделать document.body.insertBefore(newDiv, myButton). В этом методе первый аргумент — это то, что мы добавляем, а второй — элемент, который нужно добавить раньше.

Стилизация элементов через DOM

При работе с DOM принято менять стили, связанные с элементом. К счастью, это легко сделать.

Это можно сделать с помощью element.style.property = «установить свойство». Например, если бы мы хотели изменить цвет фона нашей кнопки, мы могли бы сказать myButton.style.backgroundColor = «pink». Обратите внимание, что свойство цвета фона имеет верблюжий регистр, где, как и в CSS, два слова разделены тире.

Слушатели событий

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

Если бы мы хотели создать прослушиватель для нашей кнопки, мы бы сделали myButton.addEventListener(“click”, handleClick). Это создает прослушиватель, который следит за нажатием нашей кнопки, и когда она нажимается, он запускает функцию handleClick.