Если вы только начали изучать 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
