Все статьи | Блог студента

Что такое DOM?

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Что такое DOM? главное изображение

Если вы только начали изучать JavaScript, возможно, вы слышали о DOM. Но что это такое?

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

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

Вот так мы можем визуализировать это дерево узлов.

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

Как выбрать элементы в документе

Есть несколько различных методов выбора элемента в HTML-документе. Наверное, самыми часто используемыми являются:

getElementById();
querySelector();
querySelectorAll();

getElementById()

В HTML ids используются как уникальные идентификаторы для элементов HTML. Это означает, что id у двух разных элементах не может быть одного и того же имени. В JavaScript мы можем получить HTML-тег, указав его id имя.

getElementById("myIdName");

querySelector()

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

const h1 = document.querySelector("h1"); //это будет первый элемент h1

querySelectorAll()

Этот метод находит все элементы, соответствующие селектору CSS, и возвращает список всех этих узлов.

const listItems = document.querySelectorAll("ul > li"); //все li, входящие в ul
Аватар пользователя Ася Степанова
Ася Степанова 20 октября 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
25 мая 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
25 мая 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
25 мая 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
25 мая 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
25 мая 5 месяцев