JavaScript HTML DOM Документы
Объект документа 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 |
