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

Хочешь уверенно проходить IT-интервью?

Мы понимаем, как сложно подготовиться: стресс, алгоритмы, вопросы, от которых голова идёт кругом. Но с AI тренажёром всё гораздо проще.

💡 Почему Т1 тренажёр — это мастхэв?

• Получишь настоящую обратную связь: где затык, что подтянуть и как стать лучше
• Научишься не только решать задачи, но и объяснять своё решение так, чтобы интервьюер сказал: "Вау!".
• Освоишь все этапы собеседования, от вопросов по алгоритмам до диалога о твоих целях.

Зачем листать миллион туториалов? Просто зайди в Т1 тренажёр, потренируйся и уверенно удиви интервьюеров. Мы не обещаем лёгкой прогулки, но обещаем, что будешь готов!

Реклама. ООО «Смарт Гико», ИНН 7743264341. Erid 2VtzqwP8vqy

Что такое 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 и чем не является?