Объяснение DOM (объектная модель документа) | Часть 1: Введение

Первое, что придет вам в голову после того, как вы сделаете начальные шаги по практике HTML и CSS, — как сделать интерфейс более живым?

Страница, содержащая набор элементов (узлов), которые должны функционировать в зависимости от действий пользователя (например, кнопка просто означает, что при нажатии на нее что-то должно произойти), должна работать, потому что пользователи, принимая во внимание их опыт, ожидают, что каждый элемент на эта страница должна вести себя так, как предполагается, иначе это произведет плохое впечатление. Например, представьте, что вы разговариваете с кем-то, кто не отвечает или даже не слышит вас, вы его или ее терпеть не можете, здесь то же самое.

Следовательно, термин DOM вошел в картину. Короче говоря, DOM — это способ, с помощью которого мы можем получить полный контроль над структурой документа, он дает нам возможность манипулировать всем документом.

ДОМ введение:

Объектная модель документа (DOM), как следует из названия, представляет собой модель, которая представляет логическую структуру документа (HTML, XML).

Обратите внимание, что XML, как мы знаем, представляет собой язык разметки, который представляет разнообразную информацию. XML можно рассматривать как данные, в конечном итоге эти данные представлены в виде документов, поэтому с помощью DOM мы можем работать с этими данными.

Программист(ы) может получать доступ и управлять документом(ами) с помощью DOM, управление может создавать документ(ы), работать с его содержимым, добавляя, удаляя элемент(ы)(узлы) и также перемещаясь по структуре документа. (с). Это можно сделать для документов HTML или XML, любым содержимым, находящимся в них, можно манипулировать с помощью DOM.

DOM представляют документ как логическую модель (модель структуры). другими словами, мы можем думать о DOM как о древовидной иерархии, это то же самое, что и генеалогическое древо, которое представляет членов вашей семьи (бабушек и дедушек, родителей и т. д.). Ветви дерева DOM — это узлы, которые содержат объекты, а самый верхний узел из трех называется корневым узлом. Узел — это объект, представляющий часть документа.

Объектная модель документа — это стандартный программный интерфейс, что означает, что она независима от языка и является кросс-платформенной, которая может работать на разных платформах и в разных средах, а это также означает, что любой язык программирования может взаимодействовать с DOM через набор API.

DOM первый шаг:

Когда я решил создать страницу с контентом во многих формах. Я могу придать этому содержимому смысл, вставив каждую часть страницы в тег html, примером этого содержимого может быть абзац с представленным тегом p, а также, если я решил вставить ссылки на другие страницы, тег поможет в этом. . У меня может быть форма на моей странице, я могу сгруппировать ее элемент управления внутри тега div, кроме того, давая этим тегам div классы, чтобы стилизовать их все в одном, что упрощает работу. я мог бы дать уникальный id(s) для заметных тегов. Теперь страница готова применить к ней CSS.

После добавления этого описания и информации на нашу страницу наши слова должны соответствовать нашим действиям, когда во введении сказано, что мы можем манипулировать документом, для этого мы будем использовать JavaScript.

DOM предоставляет доступ к JavaScript, поэтому он может находить элементы и изменять их содержимое, добавлять что-то в него или удалять его в результате действия, выполненного пользователем. Проверка полей формы, модификация стиля (CSS) выполняется легко. Все это достигается за счет того, что предоставляет DOM.

Примером доступа к DOM через JavaScript может быть:

Мы получаем все элементы (узлы) li, используя метод querySelectorAll("selector") для выполнения этого, этот метод возвращает объект NodeList, представляющий собой набор узлов. NodeList не является массивом, но мы можем получить доступ к его элементам с помощью квадратных скобок [], что мы и сделали в строке 2, мы получили доступ к первому элементу, а затем использовали атрибут id, который вернет идентификатор элемента.

Все, что считается содержимым документа, браузер отображает эту страницу вместе с тем, что он создает DOM для этой страницы. Кроме того, браузер исправляет ошибку разметки, например, если вы вставите тег div, не закрыв его, браузер сделает это за вас, и вы найдете его в DOM, однако учтите, что вы не ожидаете результат.

Где находится DOM:

Я буду использовать Chrome (используйте любой браузер, который вам нравится) для изучения DOM, поэтому откройте созданную вами html-страницу, щелкните правой кнопкой мыши в любом месте страницы и выберите «проверить». Во всплывающем окне откроется это окно, называемое инструментами разработчика, на вкладке «Элементы». Дом проживает:

объект документа:

Объект документа является свойством объекта window и является корнем html-документа, с помощью методов и свойств этого объекта мы можем получить доступ к документу и изменить его.

Некоторые методы, которые возражают против этого:

addEventListener(...)
getElementById(...)
querySelector(...)

Некоторые широко известные свойства:

body
documentElement
forms

Мы можем получить доступ к этому объекту на вкладке консоли инструментов разработчика, просто введите documnet в консоль и нажмите клавишу ввода. В результате этого:

DOM против HTML:

DOM и html — это одно и то же. Однако, если DOM изменен с помощью javascript или браузер исправил некоторые ошибки в разметке, таким образом вы обнаружите, что ваша html-страница отличается от DOM. Мы будем работать с этими двумя случаями:

— если DOM модифицирован JS:

Примем во внимание этот фрагмент:

Для этого мы будем использовать консоль, чтобы сделать эту модификацию на лету. Итак, откройте инструменты разработчика и начните работать:

Как видите, мы модифицировали DOM с помощью JS, если мы обновим страницу, все вернется, как описано в разметке.

— если есть ошибки разметки:

В следующем фрагменте отсутствует закрывающий тег p:

Давайте посмотрим, как браузер справится с этим:

Как видите, DOM отличается от разметки, которую мы создали, это делается браузером для исправления любых ошибок.

Однако в этом случае могут происходить странные вещи, если вы зависите от браузера в исправлении ошибок разметки. Рассмотрим этот пример:

Как видите, браузер считает, что все, что находится после тега h1, принадлежит ему, и в результате этого он приводит к тому, что тег p принимает то же свойство, что и h1. .

лазание по дереву DOM:

Теперь страница готова к отображению пользователю. Как мы уже говорили ранее, DOM будет сгенерирован автоматически после того, как браузер прочитает весь документ, DOM представляет HTML-документ в виде древовидной иерархии.

Давайте возьмем пример простого html-документа и пройдемся по его узлам и отношениям между ними:

Как видите, документ начинается с ‹!DOCTYPE html›, это объявление используется для информирования о том, что этот документ должен обрабатываться одинаково в разных браузерах. Кроме того, он сообщает браузеру, какая версия html используется.

Переходя к корневому элементу html, который содержит все остальные элементы документа, он является прямым родителем элементов head и body, а также оба они являются родственными элементами.

Элемент внутри документа может быть родительским, дочерним или родственным другому элементу, в нашем примере:

— Элемент title является родителем текста и в то же время является прямым потомком элемента head.

— В дополнение к текстовому содержимому текст может быть пробелом или новой строкой во всех элементах.

— Элемент div является родителем двух элементов p и h1.

— Элементы p и h1 внутри div являются одноуровневыми, а также элементы title и link одноуровневыми.

— нижний колонтитул имеет один элемент с текстом.

— стиль, id, класс и т. д. называются атрибутами.

Примечание: текст внутри элемента, называемого текстовым узлом, не может иметь дочерних элементов.

Этот график представляет DOM:

Как вы можете видеть, это представление того, как выглядит DOM (также известное как дерево DOM) и как оно обрабатывает узлы.

API DOM JavaScript:

В этой части мы кратко обсудим, что такое DOM API, и рассмотрим некоторые из них.

Как уже упоминалось, DOM сам по себе не является языком программирования. Он независим от языка, что означает, что он не является частью JavaScript. Тем не менее, мы можем получить доступ (доступ в этом контексте означает выполнение своего рода манипуляций) DOM через использование API через JavaScript.

С помощью объектов document и window их API может помочь нам манипулировать всем документом и получать доступ ко всем элементам внутри него. Эти объекты являются наиболее часто используемыми, мы будем часто их использовать.

Возьмем пример, демонстрирующий, что:

В этом примере мы объединяем JavaScript и HTML для достижения функциональности щелчка, когда мы нажимаем кнопку, появляется всплывающее сообщение с предупреждением.

Даже так работать просто, но совмещать html и js не рекомендуется, лучше разделить их, добавив тег script и прописав туда логику, либо использовать и внешний js файл.

Другой пример, демонстрирующий использование объектов document и window:

Можно сказать, что окно представляет всю страницу браузера, а документ — всю страницу.

Вкратце, это список распространенных API, которые мы будем часто использовать:

извлекаемый(е) элемент(ы):

Это обычно используемые API, когда нам нужно получить элемент:

— getElementById(): получить элемент по идентификатору.

— getElementsByName() | получить элементы с указанным именем атрибута.

— getElementsByTagName(…) извлекает все элементы с указанным именем тега.

— getElementsByClassName(…): получить элементы по имени (именам) класса.

— querySelector(…) извлекает первый элемент, соответствующий селектору CSS.

— querySelectorAll(…)получить все элементы с помощью селектора CSS.

Обход DOM:

— дочерние элементы: это свойство, которое возвращает объект HTMLCollection, содержащий дочерние элементы элементов.

— parentElement: свойство, дающее доступ к родительскому элементу.

— closet(…): этот метод используется для поиска элемента на нескольких уровнях выше текущего элемента и его извлечения.

— nextElementSibling: это свойство позволяет получить доступ к следующему элементу в том же родительском элементе.

Управление DOM:

С помощью манипуляций с DOM мы можем создавать, вставлять, удалять и обновлять структуру документа. Вот несколько API, которые помогают в этом:

— createElement(…): этот метод используется для создания нового элемента.

— appendChild(…): когда нам нужно добавить элемент, это может помочь.

— removeChild(…): для удаления определенного дочернего элемента элемента.

— replaceChild(…, …): если мы хотим заменить элемент, этот метод позаботится об этом.

— append(…): вставить узел после последнего узла в родительском элементе.

— prepend(…): вставить узел после первого узла в родительском элементе.

— innerHTML, innerText, textContent: эти свойства используются для изменения содержимого элемента, за исключением некоторых отличий.

Манипуляции с атрибутами:

Как и для элементов, то же самое относится и к атрибутам: мы можем создавать, вставлять, удалять, обновлять их с помощью этих наборов API:

— createAttribute(…): этот метод используется для создания атрибута.

— setAttribute(…): мы используем этот метод, когда нам нужно обновить значение атрибута.

— getAttribute(…): чтобы получить значение данного атрибута, мы используем этот метод.

— removeAttribute(…): этот метод используется для удаления атрибута.

— hasAttribute(…): чтобы проверить, имеет ли элемент заданный атрибут.

Управление стилями элементов:

Изменение стиля элемента на лету может быть легко достигнуто с помощью этих API:

— стиль: с помощью этого свойства мы можем получить или установить встроенный стиль элемента.

—getComputedStyle(… [, …]): этот метод относится к оконному объекту, он возвращает объект, содержащий вычисленный стиль элемента.

— classList: свойство возвращает набор классов, которыми можно манипулировать (добавлять, удалять и т. д.).

События ДОМ:

Событие — это действие, которое происходит, когда пользователь взаимодействует с браузером или самим браузером. Технически мы говорим, что событие было инициировано пользователем или браузером.

Прослушиватель событий запускается при срабатывании события, он реализуется с помощью функции обратного вызова. Другими словами, когда происходит действие, вызывается функция.

В JavaScript есть много событий, это список некоторых распространенных:

— события, связанные с мышью: это события, которые срабатывают, когда пользователь взаимодействует с мышью (mouseover, mouseup и т. д.).

— события, связанные с клавиатурой: это события, которые срабатывают, когда пользователь взаимодействует с клавиатурой (нажатие клавиши, нажатие клавиши и т. д.).

— события, связанные с загрузкой страницы: когда страница завершает загрузку или загрузку (загрузка, выгрузка и т. д.).

В этой части мы рассмотрим различные API DOM. В следующей части мы обсудим, что означают узлы в DOM.

Узлы в DOM:

В контексте DOM узел — это элемент, представленный как объект. Существует много типов узлов DOM. мы увидим 4 типа (узел элемента, узел атрибута, узел текста, узел комментария и т. д.), которые мы уже использовали в приведенном выше примере.

Посмотрите на ДОМ:

Элемент в контексте DOM называется узлом элементов, то же самое касается текста, он называется текстовым узлом, мы просто добавили слово узла. Корнем всего узла, как мы знаем, является документ, мы также называем его узлом документа.

Как мы обсуждали ранее, DOM рассматривается как древовидная иерархия, это вложенная структура узлов, каждый узел связан с другими узлами. сильный>. Взгляните на последний пример (фрагмент html), там вы заметите, что мы использовали узел комментария непосредственно после открывающего тега тела, в этом случае комментарий рассматривается как прямой дочерний элемент. элемента body. Текст, который появился сразу после комментария, считается текстовым узлом (рядом с новой строкой и пробелом, созданным моделью DOM) и является братским комментария и это пример связи узлов. После текстового узла идет элемент div, он называется элементным узлом, он также является родственным для предыдущих узлов (текст, комментарий), а также для следующих узлов. У узел элемента div есть 2 дочерних узла h1 и p, в данном случае div — узел родительского элемента для >h1и p.

Определите тип узла:

Каждый узел в DOM имеет уникальный тип, который является значением свойства nodeType объекта узла.

В таблице ниже показаны некоторые распространенные типы узлов:

╔═══════════════╦═══════╦════════════════════════════╗
║   CONSTANT    ║ value ║    example                 ║
╠═══════════════╬═══════╬════════════════════════════╣
║ ELEMENT_NODE  ║   1   ║ h1, p, div, etc.           ║
║ ATTRIBUTE_NODE║   2   ║ class="light", style=".."  ║
║ TEXT_NODE     ║   3   ║ Simple text                ║
║ COMMENT_NODE  ║   8   ║ <!-- This is a comment --> ║
╚═══════════════╩═══════╩════════════════════════════╝

Эти экземпляры содержат целочисленные значения, которые определяют тип узла.

Давайте возьмем примеры, демонстрирующие использование этих констант, мы будем использовать $0, это подсказка от браузера текущего выбранного элемента, чтобы мы могли получить к нему доступ непосредственно из консоли, только используя $0.

Примечание: реализован механизм стека, что означает, что мы все еще можем получить доступ к последним элементам, к которым мы обращались раньше, используя $1, $2 и так далее.

Давайте попробуем проверить, какое значение имеет свойство nodeType для некоторых узлов:

Мы можем сделать то же самое для всех других типов узлов.

Вывод:

В этой части этой статьи мы рассмотрим термины, которые являются краеугольными камнями для полного понимания этой темы. Мы обсудили различия между DOM и HTML, и мы говорим, что DOM следует древовидной иерархии, его ветви связывают элементы, поэтому он устанавливает отношения между (дочерними элементами, братьями и сестрами и т. д.).