Представление HTML -документа внутри веб -браузера рассматривается как дерево HTML DOM. Это серия объектов и определяет структуру веб -страницы.

Что такое DOM в JavaScript??

Обзор

Добро пожаловать в еще один захватывающий пост в блоге в серии JavaScript Programming. В этой статье мы собираемся затронуть очень основную, но важную концепцию веб -разработки. Да, мы собираемся охватить объект документа в JavaScript. В прошлом мы опубликовали учебные пособия JavaScript, которые обязательны для начала разработки с использованием языка JavaScript. Поэтому мы предлагаем вам подробно прочитать этот пост в блоге, чтобы вы не пропустили ничего, связанное с этой важной концепцией. Давайте начнем это руководство и узнаем , что такое DOM в JavaScript , Dom Properties и как вы можете программно взаимодействовать с ним. Мы рассмотрим следующие темы в этом руководстве JavaScript:

Что такое объектная модель документа (DOM)?

Дом означает? Документ объект модели (DOM) - это представление веб -страницы внутри веб -браузера. Просто иерархическое представление элементов документа HTML в браузере известно как модель объекта документа. Он образуется в форме дерева, которая фактически генерируется веб -браузером. Он состоит из различных узлов, которые связаны друг с другом, образуя форму дерева. Кроме того, элементы DOM имеют атрибуты и события, прикрепленные к ним. Фактически, DOM - это интерфейс программирования, который формулирует логическую структуру веб -страницы и диктует способ получить доступ к элементам страницы. По сути, JavaScript не распознает теги HTML, такие как заголовок, H1 и т. Д. Поэтому, как только HTML -документ загружается в веб -браузер, создается DOM, который затем позволяет JavaScript понимать элементы документа.

DOM -уровни

Этот раздел продемонстрирует различные уровни DOM. Во -первых, в браузере есть окно -объект, который всегда находится на вершине, а затем есть узел документа. Давайте посмотрим на изображение ниже:

DOM -уровни

Ну, вы можете увидеть элементы DOM на картинке выше. Окно и документ являются объектами браузера верхнего уровня, а затем у нас есть элемент HTML в качестве корня. Двигаясь дальше, у нас есть узлы головы и тела, узлом заголовка принадлежит узел головного узела, а узел тела содержит все узлы, которые виден и видны в веб -браузере. Кроме того, элементы тела содержат атрибуты, которые мы можем увидеть на изображении, таких как якорный тег, содержащий атрибут «href». Точно так же другие узлы DOM содержат различные атрибуты, такие как IMG, Meta и другие.

Что такое Dom Properties и как получить к ним доступ?

До сих пор мы придумали ответ на то, что является DOM в JavaScript и уровнях DOM, и мы также прошли через узлы DOM. В этом разделе мы проведем свойства DOM и посмотрим, как мы можем взаимодействовать с ними. Каждый элемент DOM имеет значение, связанное с ним, такое как тег «p», имеет текстовое свойство, IMG Tag имеет изображение и так далее. Методы JavaScript используются для доступа к значениям узлов. Кроме того, вы можете добавить/удалить слушателей событий в элементы DOM. Вы можете найти следующие Dom Properties : innerhtml : это свойство используется для установки или получения HTML -содержания узла DOM.

let htmlContent = document.getElementById("customID").innerHTML;

InnerText : Используйте это свойство DOM для доступа или установить текстовое содержание элемента HTML.

let textualContent = document.getElementById("customID").innerText;

ParentElement : Вы можете использовать это свойство для доступа к родительскому узлу элемента.

let parentNode = document.getElementById("customID").parentElement.nodeName;

Стиль : Обновите атрибут стиля элемента.

let styleAttr = document.getElementById("customID").style.color = "red";

Название : Используйте это свойство, чтобы обновить элемент заголовка DOM.

document.getElementById("customID").title= "this is a web page";

Ниже приведены некоторые из методов, которые мы можем использовать для взаимодействия с JavaScript Dom: addEventListener () : этот метод DOM используется для прикрепления обработчика событий к элементу.

document.getElementById("customID").addEventListener("click", customFunction);

getAttribute () : этот метод DOM используется для прикрепления обработчика событий к элементу.

document.getElementById("customID").addEventListener("click", customFunction);

getElementById () : Метод для получения конкретного элемента с данным «ID».

let element = document.getElementById("myID");

QuerySelector () : Используйте этот метод, чтобы получить первый дочерний элемент, который сочетается с селектором CSS.

document.getElementById("myID").querySelector(".first").innerHTML = "change the value";

toString () : Вы можете использовать этот метод для преобразования элемента в строку. Точно так же есть много других методов и свойств, которые вы можете исследовать.

Заключение

Мы заканчиваем это учебник Javasxcript здесь с надеждой, у вас есть хорошее понимание , что такое DOM в JavaScript . Мы также прошли через уровни DOM, DOM, HTML DOM Tree и свойства DOM . Этот пост в блоге очень важен для новичков, которые стремятся сильного сцепления с концепциями Javascrit. Кроме того, есть и другие соответствующие статьи, которые вы можете найти в разделе «См. Также».

Связаться с нами

Наконец, cantainerize.com предлагает текущие учебные пособия JavaScript по различным захватывающим темам. Вы можете остаться в курсе, следуя за нами на наших социальных сетях, включая Facebook, LinkedIn и Twitter.

Задайте вопрос

Вы можете сообщить нам о ваших вопросах или запросах на нашем форуме.

FAQS

Что используется в JavaScript? Вы можете посетить эту ссылку, чтобы получить подробный ответ на этот вопрос.

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