Denver 83

Веб-разработчик, фрилансер… Пишу об ИТ и смежных технологиях. В статье разберемся с объектной моделью документа (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.getElementByTagname("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 и чем не является?