DOM, или Document Object Model, в JavaScript представляет собой программный интерфейс, который позволяет изменять структуру, стиль и содержимое HTML и XML документов. Он предоставляет доступ к элементам документа как к объектам, образующим дерево, что позволяет JavaScript манипулировать веб-страницей динамически.
Старые методы получения элементов со страницы Получение элемента по его идентификатору:
Код
const box = document.getElementById('box');
Получение элемента по названию тега (в данном случае получаем HTML-коллекцию элементов):
Код
const btns = document.getElementsByTagName('button');
Получить доступ к отдельному элементу этой коллекции через его индекс, например, ко второй кнопке:
Код
const btns = document.getElementsByTagName('button')[1];
Либо таким образом:
Даже если элемент один на странице, всё равно при использовании метода getElementsByTagName будет получена HTML-коллекция.
Получение элементов по их классу:
Код
const circles = document.getElementsByClassName('circle');
На выходе также получаем HTML-коллекцию.
Более современные методы Получение коллекции элементов по селектору:
Код
const hearts = document.querySelectorAll('.heart'); // получаем NodeList
Получение одного элемента (первый элемент с указанным селектором):
Код
const heart = document.querySelector('.heart');
const box = document.querySelector('#box');
Для метода querySelectorAll доступен метод forEach()
Код
hearts.forEach(heart => {
console.log(heart);
})
Всего комментариев: 0