Работа с DOM в JavaScript

JavaScript DOM (объектная модель документа) — это интерфейс, который позволяет разработчикам управлять содержимым, структурой и стилем веб-сайта. В этом уроке мы узнаем, что такое DOM, как его создать и как его можно изменить с помощью JavaScript. Как правило, веб-сайт состоит из документа HTML и CSS, а браузер создает представление документа, известное как объектная модель документа (DOM). Этот документ позволяет JavaScript манипулировать и работать с элементами и стилями веб-сайта. Модель в основном строится с использованием древовидной структуры объектов и определяет:

HTML-элементы как объекты
Свойства этих элементов HTML и,
Методы доступа к одним и тем же элементам.

Структура DOM JavaScript

Места элементов называются узлами, а атрибуты и текст также получают свои узлы.

Особенности ДОМ

Важно отметить, что с помощью DOM JavaScript может получать доступ ко всем элементам HTML-документа и изменять их. Таким образом, следующие особенности DOM:

JavaScript может изменить все атрибуты HTML на странице.
JavaScript может изменять все элементы HTML на странице.
JavaScript может изменить все стили CSS на веб-сайте.
JavaScript может удалять и манипулировать существующими элементами и атрибутами HTML.
JavaScript также может добавлять новые элементы и атрибуты HTML.
JavaScript может реагировать на все существующие HTML-события на странице.
JavaScript также может создавать новые HTML-события на странице.

Ниже приведен список, в котором указаны методы DOM и их описания.

addEventListener() — Метод addEventListener() используется для присоединения обработчика события к определенному элементу.
appendChild() — метод «appendChild()» используется для добавления нового дочернего узла к элементу.
blur() — метод «blur()» используется для удаления фокуса с HTML-элемента.
click() — метод click() выполняет щелчок мышью по элементу HTML.
cloneNode() — метод «cloneNode()» используется для клонирования элемента.
ближайший () — метод «близкий ()» используется для поиска в дереве DOM ближайшего элемента, который соответствует указанному селектору CSS.
compareDocumentPosition() — метод «compareDocumentPosition()» используется для сравнения позиции документа двух элементов HTML.
exitFullscreen() — Свойство «exitFullscreen()» отменяет отображение элемента в полноэкранном режиме.
focus() — метод focus() используется для назначения фокуса элементу HTML.
getAttribute() — Метод getAttribute() отображает значение атрибута элемента.
getAttributeNode() — Метод getAttributeNode() отображает указанный узел атрибута.
getBoundingNode() — метод getBoundingClientRect() выводит положение и размер элемента, связанного с окном просмотра.
getElementsByClassName() — Метод getElementByClassName() отображает список дочерних элементов определенного класса.
getElementsByTagName() — Метод getElementsByTagName() отображает список дочерних элементов определенного тега.
hasAttribute() — метод hasAttribute() возвращает true, если элемент имеет добавленный атрибут; в противном случае возвращается ложь.
hasChildNodes() — метод hasChildNodes() возвращает true, если у определенного элемента есть дочерние узлы; в противном случае возвращается ложь.
insertAdjacentElement() — метод «insertAdjacentElement()» используется для вставки элемента HTML в определенную позицию, связанную с активным элементом.
insertAdjacentHTML() — метод «insertAdjacentHTML()» используется для вставки текста в формате HTML в определенную позицию, связанную с активным элементом.
insertAdjacentText() — метод «insertAdjacentText()» используется для вставки текста в определенную позицию, связанную с активным элементом.
insertBefore() — метод «insertBefore()» используется для вставки нового дочернего узла перед существующим дочерним узлом.
isDefaultNamespace() — метод isDefaultNamespace() выводит значение true, если определенный URI пространства имен установлен по умолчанию; в противном случае возвращается ложь.
isEqualNode() — метод isEqualNode() используется для проверки равенства двух HTML-элементов.
isSameNode() — метод isSameNode() используется для проверки того, являются ли два элемента HTML одними и теми же узлами или нет.
isSupported() — метод isSupported() возвращает значение true, если для элемента HTML поддерживается определенная функция.
match() — метод match() выводит логическое значение, указывающее, соответствует ли конкретный селектор CSS элементу или нет.
normalize() — метод «normalize()» используется для соединения соседних текстовых узлов и удаления пустых текстовых узлов из HTML-элемента.
querySelector() — метод «querySelector()» используется для вывода первого дочернего элемента, который соответствует определенному селектору CSS элемента HTML.
querySelectorAll() — метод «querySelectorAll()» возвращает все дочерние элементы, которые соответствуют указанному селектору CSS элемента.
remove() — метод «remove()» используется для удаления определенного элемента HTML из DOM. .
removeAttribute() — метод «removeAttribute()» используется для удаления определенного атрибута из элемента HTML.
removeAttributeNode() — Метод «removeAttributeNode()» удаляет добавленный узел атрибута и отображает его как вывод.
removeChild() — метод «removeChild()» используется для удаления определенного дочернего узла из элемента HTML.
removeEventListener() — метод removeEventListener() используется для удаления прикрепленного обработчика событий.
replaceChild() — Метод replaceChild() используется для замены дочернего узла из элемента HTML.
requestFullscreen() — метод requestFullscreen() используется для отображения HTML-элемента в полноэкранном режиме.
scrollIntoView() — метод «scrollIntoView()» используется для прокрутки определенного элемента HTML в видимую область браузера.
setAttribute() — Метод setAttribute() используется для установки атрибутов в добавленное значение.
toString() — метод toString() используется для преобразования элемента в строку.

Как создать DOM в JavaScript

В этой части мы создадим DOM в JavaScript и прикрепим его к дереву DOM.

Во-первых, мы используем метод createElement().

const element = document.createElement(htmlTag);

В нашем примере мы создадим элемент <div>.

const e = document.createElement('div');

Мы заполним <div> HTML-контентом.

e.innerHTML = 'JavaScript DOM';

Затем мы присоединяем элемент <div> к дереву DOM с помощью метода appendChild():

document.body.appendChild(e);

Теперь мы можем использовать методы DOM для создания текстовых узлов и добавления текстовых узлов к новому элементу:

var textnode = document.createTextNode('JavaScript DOM');
e.appendChild(textnode);

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

Основные типы данных и их влияние на DOM

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

Когда возвращается объект типа document, этот объект сам становится корневым объектом документа.

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

Тип элемента основан на узле. Это относится к элементу, возвращаемому членом DOM API. Например, вместо того, чтобы говорить, что метод document.createElement() возвращает ссылку объекта на узел, мы можем сказать, что этот метод возвращает только что созданный элемент в DOM.

Список узлов — это массив элементов. Доступ к элементам в nodeList осуществляется по индексу двумя способами: list.item(1) или list[1]. Во-первых, item() — это единственный метод объекта nodeList. Напротив, другой использует типичный синтаксис массива для выборки второго элемента в списке.

Атрибут или атрибут

Когда атрибут возвращается (например, методом createAttribute()), он действует как ссылка на объект, которая предоставляет особый вид для других атрибутов.

Карта именованных узлов

NamedNodeMap подобен массиву, но доступ к элементам осуществляется по имени или индексу. Элементы могут быть добавлены или удалены из namedNodeMap.

Повтор сеанса с открытым исходным кодом

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

Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно.

Основные интерфейсы в DOM

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

[document.querySelector(selector)](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
[document.querySelectorAll(name)](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
[document.createElement(name)](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
[parentNode.appendChild(node)](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)
[element.innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
[element.style.left](https://www.w3schools.com/jsref/prop_style_left.asp)
[element.setAttribute()](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)
[element.getAttribute()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute)
[element.addEventListener()](https://w3schools.com/jsref/met_element_addeventlistener.asp)
[window.content](https://developer.mozilla.org/en-US/docs/Web/API/Window/content)
[GlobalEventHandlers/onload](https://reference.codeproject.com/dom/GlobalEventHandlers/onload)
[window.scrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo)

Модификация DOM с использованием примеров кода

Как установить текстовое содержимое;

Чтобы получить текстовое содержимое узла и его потомков, воспользуемся свойством textContent:
let text = node.textContent;
И у нас уже есть следующий фрагмент HTML:

<div id="note"> JavaScript textContent Demo <span style="display:none">Hidden Text</span> </div>

Приведенный выше код объясняется ниже;

Сначала выберите элемент div с примечанием id, используя метод getElementById.
Затем отобразите текст узла, обратившись к свойству textContent.

Вывод кода;

JavaScript textContent Demo Hidden Text

Как добавить дочерний элемент

В следующем примере метод appendChild() используется для добавления трех элементов списка к элементу <ul>:

Предположим, что у нас есть следующий HTML-код:

<ul id="menu">
    </ul>

Мы создаем следующий код JavaScript;

function createMenuItem(name) {
    let li = document.createElement('li');
    li.textContent = name;
    return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));

Код объясняется ниже:

Во-первых, функция createMenuItem() создает новый элемент элемента списка с указанным именем, используя метод createElement().
После чего выбираем элемент <ul> с id menu методом querySelector().
Наконец, мы вызываем функцию createMenuItem() для создания нового пункта меню и используем метод appendChild() для добавления пункта меню к элементу <ul>.

Вывод кода;

Как получить коллекцию элементов в документе

Мы будем использовать метод getElementsByTagName() в HTML, чтобы вернуть коллекцию всех элементов в документе с заданным именем тега.

Синтаксис:

var elements = document.getElementsByTagName(name);

Где:

elements — это коллекция всех найденных элементов в том порядке, в котором они появляются с заданным именем тега в документе.
name — это строка, представляющая имя элементов.

Пример кода;

<!DOCTYPE html>
<html>
    <head>
        <title>DOM getElementsByTagName() Method</title>
    </head>
    <body style = "text-align: center">
        <h1 style = "color: green;">
            Great minds
        </h1>
        <h2 >
            DOM getElementsByTagName()
        </h2>
        <p>A computer science portal for nerds.</p>
        <button onclick="nerd()">Try it</button>
        <script>
        function nerd() {
            var doc = document.getElementsByTagName("p");
            doc[0].style.background = "green";
            doc[0].style.color = "white";
        }
        </script>
    </body>
</html>

Код объясняется ниже:

Сначала мы создали тег <p>.
Во-вторых, мы создали функцию с именем nerd() и использовали метод getElementsByTagName() для вызова абзаца «p».

Краткое содержание

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

Ресурсы

https://gabrieltanner.org/blog/javascript-dom-introduction/
https://linuxhint.com/html-dom-methods-and-properties/
https://www.javascripttutorial.net/dom/manipulating/create-a-dom-element/
https://learn.saylor.org/mod/book/view.php?id=36824&chapterid=20206

СОВЕТ ОТ РЕДАКТОРА. Не пропустите нашу статью Shadom DOM: полное руководство по связанной теме.

Первоначально опубликовано на blog.openreplay.com 19 декабря 2022 г.

JavaScript Dom

смотрите также:

Новые материалы

Объяснение документов 02: BERT

BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?

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

Работа с цепями Маркова, часть 4 (Машинное обучение)

Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]

Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter

Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js

Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!

Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Startup Data Visualization Neural Networks Tutorial Statistics Productivity Reactjs Learning