Объект документа HTML DOM является владельцем всех других объектов в вашей веб-странице.
Объект HTML DOM Document
Объект документ представляет свою веб-страницу.
Если вы хотите получить доступ к любому элементу в HTML-странице, вы всегда начинаются с доступа к объекту документа.
Ниже приведены некоторые примеры того, как можно использовать объект документа для доступа и управления HTML.
Обнаружение HTML Elements
| метод | Описание |
|---|---|
| document.getElementById( id ) | Найти элемент за элементом ID |
| document.getElementsByTagName( name ) | Найти элементы по имени тега |
| document.getElementsByClassName( name ) | Найти элементы по имени класса |
Изменение HTML-элементов
| метод | Описание |
|---|---|
| element .innerHTML = new html content | Изменение внутреннего HTML элемента |
| element . attribute = new value | Измените значение атрибута элемента HTML |
| element .setAttribute (attribute, value) | Измените значение атрибута элемента HTML |
| element .style. property = new style | Изменение стиля HTML-элемента |
Добавление и удаление элементов
| метод | Описание |
|---|---|
| document.createElement( element ) | Создать элемент HTML |
| document.removeChild( element ) | Удалить элемент HTML |
| document.appendChild( element ) | Добавить элемент HTML |
| document.replaceChild( element ) | Заменить элемент 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> элементы , которые имеют атрибут имени | 1 |
| document.applets | Возвращает все <applet> элементы (Устаревшее в HTML5) | 1 |
| document.baseURI | Возвращает абсолютный базовый унифицированный идентификатор документа | 3 |
| document.body | Возвращает <body> элемент | 1 |
| document.cookie | Возвращает печенье документа | 1 |
| document.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 |