Итак, что такое DOM?
Когда вы открываете веб-страницу в браузере, браузер создает представление этого документа, известное как объектная модель документа, и этот документ позволяет JavaScript для доступа и управления элементами веб-сайтов, а также добавить функциональности на нашу страницу.
DOM не является частью языка JavaScript, а представляет собой веб-API, используемый для создания веб-сайтов.
Модель HTML DOM представляет собой дерево объектов.
Пример,
В HTML: -
В DOM приведенный выше код представлен в виде дерева DOM:
Документ DOM
Документ DOM является владельцем всех других объектов на вашей веб-странице. Это означает, что если вы хотите получить доступ к любому объекту на своей веб-странице, вам всегда нужно начинать с документа. Он также содержит множество важных свойств и методов, которые позволяют нам получать доступ к нашему веб-сайту и изменять его. Например,
Доступ к элементам
Чтобы применить стили или функциональность к элементу с помощью JS, нам нужно сначала выбрать этот элемент, а затем сделать то, что мы должны сделать с этим элементом. Для доступа DOM предоставляет множество встроенных функций, которые мы можем использовать для выбора этого элемента.
document.getElementById ()
Метод getElementById () возвращает элемент, имеющий атрибут ID с указанным значением. Например,
document.getElementsByClassName ()
Метод getElementsByClassName () возвращает объект, подобный массиву, из всех дочерних элементов, которые имеют все имя данного класса. Например,
document.getElementsByTagName ()
Метод getElementsByTagName () возвращает коллекцию всех элементов в документе с указанным именем тега в виде объекта коллекции HTML.
document.querySelector ()
document.querySelector () возвращает первый элемент в документе, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращается null. Нам не нужно использовать разные методы для разных тегов.
document.querySelectorAll () возвращает список узлов, представляющий список элементов документа, соответствующих указанной группе селекторов. Если совпадений не найдено, возвращается null.
Примеры querySelector () и querySelectorAll ():
Управление элементами
HTML DOM позволяет нам изменять содержимое и стиль элемента HTML, изменяя его свойства.
innerHTML
Свойство JavaScript innerHTML устанавливает HTML-содержимое элемента на веб-странице. InnerHTML - это свойство HTML DOM
InnerHTML также можно использовать для размещения тегов в другом теге:
innerText
Свойство JavaScript innerText устанавливает текстовое содержимое элемента.
Смена стиля
Чтобы изменить стиль элемента HTML, нам нужно изменить свойство стиля наших элементов. Вот синтаксис для изменения цвета стиля абзаца в элементе:
Нам нужно написать в camelcase вместо обычного имени свойства CSS. В этом примере мы использовали borderBottom вместо border-bottom.
Для получения дополнительной информации, вопросов или комплиментов оставьте комментарий в разделе комментариев ниже! 😁😁
