Объект документа HTML DOM является владельцем всех других объектов на вашей веб странице.
Объект документа HTML DOM
Объект документа представляет вашу веб страницу.
Если вы хотите получить доступ к любому элементу на HTML странице, вы всегда начинаете с доступа к объекту документа.
Ниже приведены несколько примеров того, как вы можете использовать объект документа для доступа и управления HTML.
Поиск элементов HTML
| Метод | Описание |
|---|---|
| document.getElementById(id) | Найти элемент по идентификатору элемента |
| document.getElementsByTagName(name) | Найти элементы по имени тега |
| document.getElementsByClassName(name) | Найти элементы по имени класса |
Изменение HTML элементов
| Свойство | Описание |
|---|---|
| element.innerHTML = new html content | Изменить внутренний HTML код элемента |
| element.attribute = new value | Изменить значение атрибута HTML элемента |
| element.style.property = new style | Изменить стиль HTML элемента |
| Метод | Описание |
| element.setAttribute(attribute, value) | Изменить значение атрибута HTML элемента |
Добавление и удаление элементов
| Метод | Описание |
|---|---|
| document.createElement(element) | Создать элемент HTML |
| document.removeChild(element) | Удалить элемент HTML |
| document.appendChild(element) | Добавить элемент HTML |
| document.replaceChild(new, old) | Заменить элемент HTML |
| document.write(text) | Запись в выходной поток HTML |
Добавление обработчиков событий
| Метод | Описание |
|---|---|
| document.getElementById(id).onclick = function(){code} | Добавление кода обработчика событий в событие onclick |
Поиск объектов HTML
Первый HTML DOM Level 1 (1998 г.) определил 11 объектов HTML, коллекций объектов и свойств. Они все еще действительны в HTML5.
Позже, в HTML DOM Level 3, было добавлено больше объектов, коллекций и свойств.
| Свойство | Описание | DOM |
|---|---|---|
| document.anchors | Возвращает все элементы <a>, у которых есть атрибут name | 1 |
| document.applets | Возвращает все элементы <applet> (устарело в HTML5) | 1 |
| document.baseURI | Возвращает абсолютный базовый URI документа | 3 |
| document.body | Возвращает элемент <body> | 1 |
| document.cookie | Возвращает файл cookie документа | 1 |
| document.doctype | Возвращает doctype документа | 3 |
| document.documentElement | Возвращает элемент <html> | 3 |
| document.documentMode | Возвращает режим, используемый браузером | 3 |
| document.documentURI | Возвращает URI документа | 3 |
| document.domain | Возвращает доменное имя сервера документов | 1 |
| document.domConfig | Устаревший. Возвращает конфигурацию DOM | 3 |
| document.embeds | Возвращает все элементы <embed> | 3 |
| document.forms | Возвращает все элементы <form> | 1 |
| document.head | Возвращает элемент <head> | 3 |
| document.images | Возвращает все элементы <img> | 1 |
| document.implementation | Возвращает реализацию DOM | 3 |
| document.inputEncoding | Возвращает кодировку документа (набор символов) | 3 |
| document.lastModified | Возвращает дату и время обновления документа | 3 |
| document.links | Возвращает все элементы <area> и <a> с атрибутом href | 1 |
| document.readyState | Возвращает статус (загрузки) документа | 3 |
| document.referrer | Возвращает URI реферера (связывающего документа) | 1 |
| document.scripts | Возвращает все элементы <script> | 3 |
| document.strictErrorChecking | Возвращает, если принудительная проверка ошибок | 3 |
| document.title | Возвращает элемент <title> | 1 |
| document.URL | Возвращает полный URL адрес документа | 1 |