Объект документа document является родителем всех других объектов на веб-странице. Этот объект и представляет вашу веб-страницу.
Если вам нужно получить доступ к какому-то элементу на HTML странице, то прежде вам потребуется обратиться к объекту document.
Ниже представлено несколько примеров, как можно использовать объект документа для доступа и манипулирования HTML.
Поиск элементов HTML
| Метод | Описание |
|---|---|
| document.getElementById(id) | Поиск элемента по идентификатору id |
| document.getElementsByTagName(имя) | Поиск элемента по имени тега |
| document.getElementsByClassName(имя) | Поиск элемента по имени класса |
Изменение элементов HTML
| Метод | Описание |
|---|---|
| элемент.innerHTML = новое содержимое | Изменяет внутреннее содержимое элемента |
| элемент.атрибут = новое значение | Изменяет значение атрибута элемента |
| элемент.setAttribute(атрибут, значение) | Изменяет значение атрибута элемента |
| элемент.style.свойство = новый стиль | Изменяет стиль элемента |
Добавление и удаление элементов
| Метод | Описание |
|---|---|
| document.createElement(элемент) | Создает HTML элемент |
| document.removeChild(элемент) | Удаляет HTML элемент |
| document.appendChild(элемент) | Добавляет HTML элемент |
| document.replaceChild(элемент) | Заменяет HTML элемент |
| document.write(текст) | Записывает во внешний поток HTML |
Добавление обработчика события
| Метод | Описание |
|---|---|
| document.getElementById(id).onclick = function(){код} | Добавляет код обработчика для события onclick |
Поиск объектов HTML
Первый HTML DOM уровень 1 (1998) определял 11 HTML объектов, наборов объектов и свойств. Все они все еще актуальны в HTML5.
Позднее, в HTML DOM уровень 3 были добавлены новые объекты, наборы и свойства.
| Свойство | Описание | DOM |
|---|---|---|
| document.anchors | Возвращает все элементы <a>, у которых есть атрибут name | 1 |
| document.applets | Возвращает все элементы <applet> (Запрещено в HTML5) | 1 |
| document.baseURI | Возвращает абсолютный базовый URI документа | 3 |
| document.body | Возвращает элемент <body> | 1 |
| document.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 | Возвращает URL-адрес документа, который загружал текущий документ | 1 |
| document.scripts | Возвращает все элементы <script> | 3 |
| document.strictErrorChecking | Возвращает, выполняется ли проверка ошибок или нет | 3 |
| document.title | Возвращает элемент <title> | 1 |
| document.URL | Возвращает полный URL документа | 1 |
