JavaScript HTML DOM Документ
Объект документа HTML DOM является владельцем всех других объектов на вашей веб-странице.
Объект документа HTML DOM
Объект документа представляет вашу веб-страницу.
Если вы хотите получить доступ к любому элементу на HTML-странице, вы всегда начинаете с доступа к объекту документа.
Ниже приведены несколько примеров того, как вы можете использовать объект документа для доступа и управления HTML.
Поиск HTML элементов
| Метод | Описание |
|---|---|
| document.getElementById(id) | Найти элемент по идентификатору элемента (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 уровня 1 (1998 г.) определяла 11 объектов HTML, коллекций объектов и свойств. Они по-прежнему действительны в HTML5.
Позже, в HTML DOM Level 3, было добавлено больше объектов, коллекций и свойств.
| Свойство | Описание | DOM |
|---|---|---|
| document.anchors | Возвращает все <a> элементы, у которых есть атрибут name | 1 |
| document.applets | Устарело | 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 | Obsolete. | 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 |
