DOM - Объект документа

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