Что такое HTML DOM?
HTML DOM — это объектная модель для HTML . Он определяет:
- HTML-элементы как объекты
- Свойства для всех элементов HTML
- Методы для всех элементов HTML
- События для всех элементов HTML
HTML DOM — это API ( интерфейс программирования) для JavaScript :
- JavaScript может добавлять/изменять/удалять элементы HTML
- JavaScript может добавлять/изменять/удалять атрибуты HTML
- JavaScript может добавлять/изменять/удалять стили CSS
- JavaScript может реагировать на события HTML
- JavaScript может добавлять/изменять/удалять события HTML
HTML DOM (объектная модель документа)
Когда веб-страница загружается, браузер создает объектную модель документа страницы .
Модель HTML DOM построена как дерево объектов :
Дерево объектов HTML DOM
Поиск элементов HTML
Если вы хотите получить доступ к элементам HTML с помощью JavaScript, вы должны сначала найти элементы.
Есть несколько способов сделать это:
- Поиск элементов HTML по идентификатору
- Поиск элементов HTML по имени тега
- Поиск элементов HTML по имени класса
- Поиск элементов HTML с помощью селекторов CSS
- Поиск элементов HTML по коллекциям объектов HTML
Поиск элемента HTML по идентификатору
Самый простой способ найти элемент HTML в DOM — использовать идентификатор элемента.
В этом примере выполняется поиск элемента с id="intro":
Пример
var myElement = document.getElementById("intro");
Если элемент найден, метод вернет элемент как объект (в myElement).
Если элемент не найден, myElement будет содержать null.
Поиск элементов HTML по имени тега
Этот пример находит все элементы <p>:
Пример
var x = document.getElementsByTagName("p");
Этот пример находит элемент с id="main", а затем находит все элементы <p> внутри "main":
Пример
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Поиск элементов HTML по имени класса
Если вы хотите найти все элементы HTML с одинаковым именем класса, используйте getElementsByClassName().
Этот пример возвращает список всех элементов с class="intro".
Пример
var x = document.getElementsByClassName("intro");
Поиск элементов по имени класса не работает в Internet Explorer 8 и более ранних версиях.
Поиск элементов HTML с помощью селекторов CSS
Если вы хотите найти все элементы HTML, которые соответствуют указанному селектору CSS (идентификатор, имена классов, типы, атрибуты, значения атрибутов и т. д.), используйте метод querySelectorAll().
В этом примере возвращается список всех элементов <p> с class="intro".
Пример
var x = document.querySelectorAll("p.intro");
Метод querySelectorAll() не работает в Internet Explorer 8 и более ранних версиях.
Поиск элементов HTML по коллекциям объектов HTML
Также доступны коллекции объектов HTML:
Учебник по HTML DOM
Полное руководство по HTMLDOM
Это было краткое введение в HTMLDOM.
Полное руководство по HTMLDOM можно найти в W3Schools HTMLDOM Tutorial .