Share This
Связаться со мной
Крути в низ
Categories
//❔ DOM: что такое объектная модель документа простыми словами

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

dom chto takoe obektnaja model dokumenta prostymi slovami 5f117ca - ❔ DOM: что такое объектная модель документа простыми словами

Веб-разработчик, фрилансер… Пишу об ИТ и смежных технологиях. В статье разберемся с объектной моделью документа (DOM), узнаем для чего это нужно и как эти знания применять на практике.

dom chto takoe obektnaja model dokumenta prostymi slovami e2fc621 - ❔ 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 и чем не является?

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    blank
    Roman Spiridonov

    Моя специальность - Back-end Developer, Software Engineer Python. Мне 39 лет, я работаю в области информационных технологий более 5 лет. Опыт программирования на Python более 3 лет. На Django более 2 лет.

    Categories 05.

    © Speccy 2022 / All rights reserved

    Связаться со мной
    Close