Руководство для начинающих по JavaScript DOM

Руководство для начинающих по JavaScript DOM

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

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

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

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

DOM и как она создается.

DOM описывает HTML-страницу как иерархию узлов; он анализирует HTML-код и создает его объектное представление, где HTML-тег/элемент переводится в узел элемента, а текст/пробел — в узел текста, поскольку браузер не работает с текстом за кулисами.

JavaScript против браузера.

JavaScript и браузер постоянно взаимодействуют, причем браузер отвечает за разбор, рендеринг и загрузку сценариев HTML/JavaScript при их загрузке. Как мы все знаем, JavaScript — это размещенный язык, где браузер предоставляет среду для эффективной работы JavaScript. Браузер предоставляет множество API и функциональных возможностей, позволяющих JavaScript работать с разобранными документами.

API DOM

Большинство веб-интерфейсов (включая DOM API) написаны на JavaScript с единственной целью — манипулировать DOM веб-документов.

API обычно называют «интерфейсами прикладного программирования», которые служат путем между рендерингом HTML-документов и JavaScript. Он имеет коллекции интерфейсов, свойств и методов и состоит из структур кода для манипулирования функциональностью приложения разработчиками.

Разница между узлами и элементами

Все в DOM является просто узлом. Узлы — это, как правило, объекты, составляющие DOM. Элементы/узлы элементов — это HTML-теги в DOM, текстовые узлы — это текст и пробельные символы в DOM, а атрибуты создают узлы атрибутов.

Узлы и элементы как-то взаимозаменяемо используются в DOM, но между ними есть разница.

**Элементы ** — это просто один из типов узлов, доступных в DOM, созданный из HTML-тега, отображаемого без текста. Он состоит из некоторых специальных свойств и методов для взаимодействия с элементами путем изменения стиля, содержимого, создания или удаления элемента. Node — это и элемент, и текстовый узел.

Наш пример кода

Выборка/запрос узлов.

Существует множество методов выбора и запроса узлов в DOM вашей визуализированной HTML-страницы.

Они следующие.

• querySelector().

• querySelectorAll().

• getElementById().

• getElementsByTagName().

• getElementByClassName().

1. querySelector(). С помощью querySelector() вы можете получить доступ к одному элементу в DOM. Этот метод дает вам больше гибкости и возможностей, поскольку он может принимать селекторы CSS и псевдоселекторы, которые вы можете использовать в файле CSS.

Рекомендуется использовать document.querySelector() для доступа к первым элементам в DOM.

Этот метод также можно использовать для уникального выбора первых экземпляров, т.е. он принимает любые CSS-селекторы и вернет первый элемент, если есть селекторы, которые соответствуют нескольким элементам. Несмотря на то, что все теги li в нашем коде имеют класс listItem, он вернет только первый li.

1. querySelectorAll () Этот метод используется, если вы хотите получить доступ к коллекции элементов, к объекту типа массива, который обычно представляет собой список узлов, не настоящий массив, а объект типа массива, который поддерживает определенное поведение массива. У вас также есть различные способы запроса документов с помощью CSS-селекторов и псевдоселекторов, которые возвращают неживой список узлов.

1. getElementById(). Этот метод — самый простой способ найти элемент в дереве DOM и вернет один элемент, так как Id — это уникальный способ присвоения атрибута элементу.

Приведенный ниже фрагмент кода показывает результат уникального способа выбора Id элемента vp из нашего кода.

1. getElementsByTagName() этот метод используется для доступа к элементам с похожими именами тегов. Он возвращает HTML-коллекцию вместо Nodelist, как querySelectorAll(), и возвращает живой Nodelist.

1. getElementsByClassName(). Этот метод извлекает элементы с похожими именами классов в коллекцию HTML.

Приведенный ниже код показывает результат выбора className всех li в нашем примере кода.

Оценка и манипулирование элементами DOM

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

• innerText

• innerHTML

• textContent

innerText; Это один из методов доступа и изменения текста в DOM. Он отображает невидимый текст, содержащийся внутри узла. Код ниже для большей наглядности.

Приведенный выше код показывает результат для innerText первого li с Id равным fab. Обратите внимание, что я добавил span к первому li из кода нашего примера.

InnerHTML; с помощью этого метода возвращается содержимое текста и расстояние между элементами, и весь HTML-элемент может быть добавлен в DOM. В примере ниже показано, где элемент h2 был добавлен/добавлен в наш код примера с помощью innerHTML.

textContent; этот метод получает внутренний текст в том виде, в котором он был в исходном коде. Он не возвращает теги, но возвращает все интервалы и скрытый текст CSS.

Приведенный выше код заменяет текстовое содержимое, иначе известное как текстовый узел, новым текстом.

Разница между атрибутами и свойствами

Хотя и не всегда, атрибуты стратегически сопоставлены со свойствами, что позволяет осуществлять синхронизацию в реальном времени. Атрибут — это все, что написано в HTML-коде, что позволяет браузеру создать объект DOM на основе имени тега.

Свойства — это значение, хранящееся в объекте, который создается на основе HTML-кода автоматически. Объекты в JavaScript имеют свойства.

Как установить/удалить/получить атрибут

Для изменения/модификации/удаления/получения атрибута в DOM существует множество методов, которые перечислены ниже.

• setAttribute() этот метод используется для установки атрибутов нашему указанному элементу. Этот метод принимает два значения — имя атрибута, который вы хотите установить (должно быть строкой), и значение, которое вы хотите придать установленному атрибуту.

• removeAttribute() С помощью этого метода атрибуты могут быть удалены из нашего HTML-элемента. Этот метод принимает только одно значение, в отличие от метода setAttribute(), который принимает два значения.

• getAttribute() этот метод, как следует из названия, позволяет получить/извлечь атрибут из HTML-кода. Он принимает одно значение, как и removeAttribute().

Обход DOM.

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

Обход DOM — это использование одного выбранного узла для доступа к его дочерним элементам (ChildrenElement), родительским элементам (parentElement), сиблингам (SiblingElement) или остальным элементам. С помощью обхода вы можете перемещаться в любом направлении в DOM. Прежде чем мы перейдем к обходу DOM, давайте ознакомимся с некоторыми терминами, с которыми мы столкнемся.

Ребенок/дети

Это просто означает прямой дочерний узел или узел элемента.

В приведенном выше коде h1 является дочерним узлом div.

Потомок/потомок

Потомками являются как прямые, так и косвенные узлы элемента в DOM.

Приведенный выше код показывает, что и h1, и тег sub являются потомками div.

Родитель.

Как и дочерний/потомок, родительский узел — это прямой родительский узел или элемент.

div является родителем h1, но не тега sub, как показано выше.

Предшественник

Предком является как прямой, так и косвенный родительский узел элемента.

Div является предком как тега h1, так и тега sub.

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

Ниже приведены некоторые из важных свойств.

• parentElement/родительский узел

• childNode/дети

• firstChild/firstElementChild

• lastChild/последнийElementChild

• nextSibling/nextElementSibling

• previousSibling/previousElementSibling

parentElement/parentNode; разница между parentElement и parentNode заключается в том, что parentElement используется для выбора родительского узла элемента, а parentNode — для выбора любого узла в DOM.

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

При использовании parentElement для li из нашего примера код возвращает вышеприведенный ответ.

childNode/children; основное различие между childNode и children заключается в том, что в то время как childNode возвращает все дочерние узлы в DOM (включая текст), children используется для выбора только дочернего узла элемента.

«children» используется для извлечения всех вложенных элементов внутри родительского элемента.

Все дочерние элементы были извлечены, когда свойство children было использовано для их родителя.

firstChild/firstElementChild; разница между firstChild/firstElementChild в том, что firstElementChild возвращает только первый дочерний элемент, а firstChild возвращает первый дочерний узел.

Если у вас много дочерних элементов, вложенных в родительский, и вам нужно выбрать первый дочерний элемент, вы можете использовать querySelector для получения первого дочернего элемента, но вы также можете использовать известный firstElementchild для получения результата.

lastChild/lastElementChild; разница между lastChild/lastElementChild заключается в том, что если lastChild возвращает последний узел, то lasElementChild возвращает последний дочерний узел элемента.

Если существует много дочерних элементов, вложенных в родительский, и есть необходимость выбрать последний дочерний элемент, lastElementchild даст вам результат.

nextSibling/nextElementSibling; разница между nextSibling/nextElementSibling заключается в том, что nextSibling возвращает следующий узел сиблинга, а nextElementSibling возвращает следующий узел сиблинга элемента.

Если вы хотите выбрать следующий элемент-сестру уже выбранного элемента, используйте свойство nextElementSibling.

Результат нашего примера дает ul в качестве следующего элемента-сестры h1.

previousSibling/nextElementSibling; разница между previousSibling/previousElementSibling заключается в том, что если previousSibling возвращает предыдущий узел сиблинга, то previousElementSibling возвращает предыдущий узел сиблинга элемента.

Если вы хотите выбрать предыдущий элемент-сестру уже выбранного элемента, используйте свойство previousElementSibling.

Вывод кода, который выбирает предыдущий элемент-сестру на кнопке с классом .btn из нашего примера кода — это ul.

Метод запроса против обхода DOM

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

Стилизация элементов DOM

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

Свойство стиля

style; если вы знакомы со свойствами CSS, мы можем получить доступ к свойствам в JavaScript и манипулировать стилями и изменять их, используя любые свойства CSS. Вы можете напрямую нацелиться на отдельные стили CSS, используя метод inline, и это имеет более высокую специфичность, которая будет переопределять любые свойства стиля, назначенные элементу. В нашем примере кода я изменил цвет фона h1 на синий. пример ниже.

Примечание: При изменении стилей в JavaScript, вместо использования змеиного регистра, как мы используем в CSS, принято использовать верблюжий регистр, как я сделал в приведенном выше коде, который изменил background-color в CSS на backgroundColor в JavaScript. Этот вид стилизации, известный как inline, будет работать только на одном элементе. Если мы хотим изменить цвет фона всех наших тегов li, поскольку мы уже присвоили им класс listItem, это не сработает, пока мы не пройдемся по каждому из них и не применим стиль. код ниже для наглядности.

Через className

С помощью className можно манипулировать классами CSS, прикрепленными к элементу, динамически изменяя, удаляя или добавляя новые классы CSS к элементу. При использовании className требуется одна строка, содержащая все добавляемые классы. Все классы устанавливаются и управляются один раз, при этом можно управлять и другими свойствами, например id.

Через classList

classList — это объект JavaScript с парой встроенных методов, которые позволяют добавлять/удалять/переключать и проверять, содержит ли элемент класс CSS. Он дает вам контроль над добавленными классами и может также использоваться в сочетании с className.

Создание/вставка нового элемента

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

Это можно сделать двумя основными способами; они приведены ниже:

1 HTML-строка

1. creatElement()

HTML-строка может быть использована для создания нового элемента в DOM и может быть добавлена с помощью innerHTML и insertAdjacentHTML.

innerHTML

Свойство innerHTML, которое вы найдете на узле элемента, добавляет или отображает HTML-код в том месте, куда вы его добавили. Оно полезно, когда вы планируете изменить все HTML-содержимое элемента.

insertAdjacentHTML.

Альтернатива insertAdjacaentHTML — это метод, который можно использовать для добавления HTML-кода рядом с существующим кодом вместо его замены. Он имеет четыре позиции: beforbegin, afterbegin, beforeend и afterend.

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

В приведенном выше коде показан новый элемент li, созданный с помощью метода createElement.

Объект createElement() может быть добавлен в DOM с помощью следующих методов.

1. appendChild()/append()

2. prepend(),before(),after(),insertBefore().

3. replaceChild()/replaceWith().

**appendChild/append(); ** используется для добавления вновь созданных элементов в DOM. Если append() вставляет как текст, так и узел элемента, то appendChild() используется только для вставки узла элемента.

**prepend(),before(),after(),insertBefore(); **используется для вставки элемента/узла в определенную позицию. Prepend() используется для вставки только что полученного элемента в качестве первого элемента, before() используется для вставки перед выбранным элементом, after() используется для вставки элемента в определенную позицию после выбранного элемента, а insertbefore используется для вставки дочернего узла перед существующим дочерним узлом.

*replaceChild () или replaceWith () replaceWith *() используется для замены всего элемента в DOM.

Клонирование узлов DOM

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

Удаление элементов

Хорошо, когда элемент вставлен в DOM, но будет плохо, если мы не сможем удалить ненужные элементы из нашего DOM. Да, с помощью replaceWith() мы можем удалить элемент, но только для того, чтобы заменить его другим элементом. Чтобы полностью избавиться от элемента, существуют методы remove() и removeChild().

Приведенный выше код удалит ul в нашем примере кода.

Приведенный выше код показывает, как использовать removeChild().

Заключение

На этом мы закончили.

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

Надеюсь, эта статья поможет вам получить четкое представление о DOM JavaScript.

Приятного вам дня.

Читайте эту и другие статьи в моем блоге Typeshare Social Blog