❔ DOM: что такое объектная модель документа простыми словами

В статье разберемся с объектной моделью документа (DOM), узнаем для чего это нужно и как эти знания применять на практике.

Что такое DOM?

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

Чтобы создать такой, хорошо продуманный и привлекательный для пользователей сайт, все его файлы, включая разметку, стили и скрипты должны тесно взаимодействовать друг с другом, и объектная модель документа (или DOM ) предоставляет нам такую возможность.

Чтобы сделать HTML-документ более динамичным и интерактивным, скрипт‌‌ должен иметь доступ к его содержимому, одновременно отслеживая действия пользователя.‌‌

DOM – это древовидное представление веб-сайта, загружаемого в браузер, в виде серии объектов, вложенных друг в друга. Оно определяет логический каркас документа, способы доступа к нему и управления им. С его помощью мы можем создавать документы, перемещаться по их структуре, а также добавлять, изменять или удалять его элементы и их содержимое.

Работа с DOM

Давайте посмотрим на простой пример, показывающий, как скрипт может получить доступ к содержимому HTML-документа через DOM:

<h1>Войдите в свой аккаунт</h1>‌‌
<form name=”LoginForm” action=”login.php” method=”post”>‌‌Имя пользователя
    <input type=”text” name=”txtUsername” size=”15”/> <br/>‌‌Пароль
    <input type=”password” name=”numPassword” size=”15”/> <br/>‌‌
    <input type=”submit” value=”LogIn” />‌‌
</form>‌‌
<p> Новый пользователь? <a href=”register.php”> Зарегистрироваться</a> 
<a href=”lostPassword.php”> Получить пароль </a> 
</p>

var username = document.LoginForm.txtUsername.value // Получаем значение поля имя юзера 

Это HTML-форма входа на сайт. Корень любого DOM-дерева – сам HTML-документ (document). А уже от корня, в зависимости от структуры нашей HTML-разметки – тянется вверх ствол с ветками. Вы можете получить доступ ко всем его элементам с помощью набора свойств и методов, предоставляемых DOM API. Но что это за методы? Кроме уже использованного в примере, существуют еще несколько полезных функций. Разберем те из них, что чаще всего применяются в проектах:

Методы querySelector() и querySelectorAll()

Нужны для доступа к одному или нескольким элементам из DOM, соответствующим одному или нескольким селекторам CSS, например:

<div> блок №1 </div>
<p> параграф №1 </p>
<div> блок №2 </div>
<p> параграф №2 </p>

var paragraph = document.querySelectorAll( 'p' );

Метод createElement()

Используйте этот метод для создания указанного элемента и вставки его в DOM:

html
<div> блок №1 </div>
<p> параграф №1 </p>
<div> блок №2 </div>
<p> параграф №2 </p>
js
var thirdPrgrph = document.createElement('p');

Метод getElementById()

Этот метод необходим для получения элемента из документа по его уникальному атрибуту id:

<div id = ”first” > блок №1 </div>
<p> параграф №1 </p>
<div> блок №2 </div>
<p> параграф №2 </p>

var firstblock = getElementById("first")

Метод getElementsByTagname()

Используйте этот метод для доступа к одному или нескольким элементам по имени их HTML-тега:

<div> блок №1 </div>
<p> параграф №1 </p>
<div> блок №2 </div>
<p> параграф №2 </p>

blocks = document.getElementsByTagName("div");

Метод setAttribute()

Этот метод используется для установки или изменения значения атрибута элемента.

Предположим, у нас есть атрибут id, содержащий значение favorite.‌‌ Но мы хотим изменить значение на usual. Сделаем это, используя рассматриваемый метод:

<div>‌‌
    <h1 id='favorite'>Нечто важное</h1>
</div>

var h1 = document.querySelector( 'h1' );
h1.setAttribute(div, 'usual');

Также рассмотрим несколько часто применяемых при работе с DOM свойств:

Свойство innerHTML

А это свойство необходимо применять в тех случаях, когда нам нужен доступ к текстовому содержимому элемента. Небольшой пример с выводом текста с помощью рассматриваемого свойства:

<p id="element">Какой-то текст</p>

let element = document.querySelector('#element');
console.log(element.innerHTML);

Выведет в консоль:

Какой-то текст

Свойство addEventListener()

Это свойство прикрепляет прослушиватель событий к вашему элементу. Синтаксис будет такой:

elem.addEventListener(event, hndlr);

Здесь:

elem – элемент, которому назначен обработчик события.

event – некое событие, допустим, click.

hndlr – функция, обрабатывающая это событие.

Методы для работы с узлами DOM

Каждый элемент на HTML-странице называется узлом, даже объект document, представляющий весь документ. Вы можете получить доступ к любому из них, используя следующие свойства объекта node:

1. node.childNodes – обращается к дочерним узлам выбранного родителя‌‌.
2. node.firstChild – доступ к первому дочернему элементу выбранного родителя‌‌.
3. node.lastChild – доступ к последнему дочернему элементу выбранного родителя.‌‌
4. node.parentNode – обращается к родителю выбранного дочернего узла.‌‌
5. node.nextSibling – доступ к следующему последовательному элементу (родному элементу) выбранного элемента.‌‌
6. node.previousSibling– обращается к предыдущему элементу (родному брату) выбранного элемента.

Для чего нужен DOM

DOM – это нисходящее представление всех элементов, составляющих веб-страницу. Это интерфейс, через который скрипт взаимодействует с вашим HTML. Для чего вам знать это? Учитывая, что самым часто производимым действием при работе с DOM является поиск (выбор) определенных элементов, вам необходимо понимать среду, в которой вы желаете что-то поменять. Ведь не имея представления об устройстве DOM-дерева и понимания связи между его узлами – найти что-то в нем будет крайне затруднительно.

Материалы по теме

• Не паси задних: используй DOM как профессионал
• Инкапсуляция в коде веб-приложений: что такое shadow DOM
  
• Объектная модель документа: что такое DOM и чем не является?