Объектная модель документа DOM — это способ управления структурой и стилем HTML-страницы. Он представляет внутреннюю часть страницы такой, какой её видит браузер, и позволяет разработчику изменять её с помощью JavaScript.
Если вы хотите просмотреть DOM для страницы, откройте инструменты разработчика в своём браузере и найдите панель “элементы”. Это отличное представление о том, как браузер думает, и в большинстве браузеров вы можете удалять и изменять элементы напрямую. Попробуйте!
Деревья и ветви
HTML — это структура, подобная XML, в которой элементы образуют структуру родительских узлов с дочерними узлами, подобную ветвям дерева.
Существует один корневой элемент (html) с ответвлениями типа head и body, каждое со своими собственными ответвлениями. По этой причине DOM также называется DOM-деревом.
Модификация DOM путём выбора элемента и изменения чего-либо в нем ─ это то, что часто делается в JavaScript. Для доступа к DOM из JavaScript используется объект document. Он предоставляется браузером и позволяет коду на странице взаимодействовать с содержимым.
Получение элемента
Первое, что нужно знать, это как получить элемент. Существует несколько способов сделать это, и браузеры поддерживают разные из них. Начиная с наиболее поддерживаемых, мы перейдём к последним и наиболее полезным версиям.
По идентификатору
document.getElementById ─ это метод для получения доступа к элементу ─ что неудивительно ─ по его идентификатору.
var pageHeader = document.getElementById('page-header');Затем элементом pageHeader можно манипулировать ─ можно изменить его размер и цвет, а также объявить другой код для обработки элемента, на который нажимают или над которым наводят курсор. Он поддерживается практически во всех браузерах, о которых вам нужно беспокоиться.
Обратите внимание, что getElementById ─ это метод объекта document. Многие методы, используемые для доступа к странице, находятся в объекте document.
По имени тега
document.getElementsByTagName работает почти так же, как getElementById, за исключением того, что принимает имя тега (a, ul, li.) Вместо идентификатора и возвращает список узлов, который по сути является массивом элементов DOM.
По имени класса
document.getElementsByClassName возвращает тот же тип списка узлов, что и getElementsByTagName, за исключением того, что вы передаёте имя класса для сопоставления, а не имя тега.
С помощью CSS-селектора
В современных браузерах доступно несколько новых методов, которые упрощают выбор элементов, позволяя использовать CSS-селекторы. Это document.querySelector и document.querySelectorAll.
var pageHeader = document.querySelector('#header');
var buttons = document.querySelectorAll(.btn);querySelector, например getElementById, возвращает только один элемент, тогда как querySelectorAll возвращает список узлов. Если несколько элементов соответствуют селектору, который вы передаёте querySelector, будет возвращён только первый.
Страницы в тему:
- Следующая страница: События и обратные вызовы
- Предыдущая страница: Продвинутый урок JavaScript
