JavaScript HTML DOM Объект документа
Когда HTML документ загружается в веб браузер, он становится объектом документа.
Объект документа — это корневой узел документа HTML.
Свойства и методы
В HTML документах можно использовать следующие свойства и методы:
| Свойство/Метод | Описание |
|---|---|
| activeElement | Возвращает текущий сфокусированный элемент в документе |
| addEventListener() | Присоединяет обработчик событий к документу |
| adoptNode() | Принимает узел из другого документа |
| anchors | Возвращает коллекцию всех элементы в документе, у которых есть атрибут name |
| applets | Возвращает коллекцию всех элементы в документе |
| baseURI | Возвращает абсолютный базовый URI документа |
| body | Устанавливает или возвращает тело документа (элемент ) |
| close() | Закрывает выходной поток, ранее открытый с помощью document.open() |
| cookie | Возвращает все пары имя/значение файлов cookie в документе |
| charset | Устарело. Вместо этого используйте characterSet. Возвращает кодировку символов для документа |
| characterSet | Возвращает кодировку символов для документа |
| createAttribute() | Создает узел атрибута |
| createComment() | Создает узел комментария с указанным текстом |
| createDocumentFragment() | Создает пустой узел DocumentFragment |
| createElement() | Создает узел элемента |
| createEvent() | Создает новое событие |
| createTextNode() | Создает текстовый узел |
| defaultView | Возвращает объект окна, связанный с документом, или null, если его нет |
| designMode | Управляет возможностью редактирования всего документа |
| doctype | Возвращает объявление типа документа, связанное с документом |
| documentElement | Возвращает элемент документа документа (элемент ) |
| documentMode | Возвращает режим, используемый браузером для отображения документа |
| documentURI | Устанавливает или возвращает расположение документа |
| domain | Возвращает доменное имя сервера, на котором загружен документ |
| domConfig | Устарело. Возвращает конфигурацию DOM документа |
| embeds | Возвращает коллекцию всех элементов элементы документа |
| execCommand() | Вызывает указанную операцию буфера обмена для элемента, имеющего в данный момент фокус |
| forms | Возвращает коллекцию всех элементов элементы в документе |
| fullscreenElement | Возвращает текущий элемент, отображаемый в полноэкранном режиме |
| fullscreenEnabled() | Возвращает логическое значение, указывающее, можно ли просмотреть документ в полноэкранном режиме |
| getElementById() | Возвращает элемент с атрибутом ID с указанным значением |
| getElementsByClassName() | Возвращает HTMLCollection, содержащую все элементы с указанным именем класса |
| getElementsByName() | Возвращает HTMLCollection, содержащую все элементы с указанным именем |
| getElementsByTagName() | Возвращает HTMLCollection, содержащую все элементы с указанным именем тега |
| hasFocus() | Возвращает логическое значение, указывающее, находится ли документ в фокусе |
| head | Возвращает элемент документа |
| images | Возвращает коллекцию всех |
| implementation | Возвращает объект DOMImplementation, который обрабатывает этот документ |
| importNode() | Импортирует узел из другого документа |
| inputEncoding | Возвращает кодировку, набор символов, используемый для документа |
| lastModified | Возвращает дату и время последнего изменения документа |
| links | Возвращает коллекцию всех и элементы в документе, имеющие атрибут href |
| normalize() | Удаляет пустые текстовые узлы и соединяет соседние узлы |
| normalizeDocument() | Удаляет пустые текстовые узлы и соединяет соседние узлы |
| open() | Открывает поток вывода HTML для сбора вывода из document.write() |
| querySelector() | Возвращает первый элемент, который соответствует указанным селекторам CSS в документе |
| querySelectorAll() | Возвращает статический NodeList, содержащий все элементы, которые соответствуют указанным селекторам CSS в документе |
| readyState | Возвращает статус (загрузки) документа |
| referrer | Возвращает URL документа, в который загружен текущий документ |
| removeEventListener() | Удаляет обработчик событий из документа (который был прикреплен с помощью метода addEventListener()) |
| renameNode() | Переименовывает указанный узел |
| scripts | Возвращает коллекцию элементы в документе |
| strictErrorChecking | Устанавливает или возвращает, применяется ли проверка ошибок или нет |
| title | Устанавливает или возвращает заголовок документа |
| URL | озвращает полный URL HTML документа |
| write() | Записывает в документ выражения HTML или код JavaScript |
| writeln() | То же, что и write(), но добавляет символ новой строки после каждого заявления |
Объект Document в JavaScript — содержимое окна браузера
На этом уроке мы рассмотрим объект document , который отвечает за HTML документ, загруженный в окно или вкладку браузера. С помощью этого объекта в JavaScript Вы можете не только получить различную информацию об этом документе, но и изменить его.
Основные объекты браузера
Перед тем как перейти к изучению объекта document , давайте вспомним, какие нам в JavaScript доступны объекты и за что они отвечают.
При открытии документа браузер автоматически создаёт набор объектов для JavaScript, с помощью которых Вы можете не только работать с этим документом (объект document ), но и управлять самим браузером (объекты window , location , navigator , screen , history ). Все эти объекты образуют объектную модель браузера (BOM — Browser Object Model).
Главным объектом в этой модели является объект window . Все остальные объекты доступны как свойства объекта window ( window.document , window.location и т.д.). Если мы работаем с текущим окном, то » window. » можно опускать, т.е. document , location и т.д. Объект location — отвечает за адресную строку, объект history — за кнопки вперёд и назад, объект, объект screen — за экран пользователя, объект window — отвечает за само окно, а также позволяет изменять его размеры, перемещать его и т.д., navigator — позволяет получить информацию о браузере.
Наибольший интерес среди всех этих объектов для нас предоставляет именно объект document , т.к. он отвечает за документ, загруженный в окно или вкладку браузера. Он даёт начало объектной модели документа (DOM — Document Object Model), которая стандартизована в спецификации и поддерживается всеми браузерами.
К рассмотрению этой модели мы приступим на следующих уроках. На этом уроке мы рассмотрим некоторые свойства и методы объекта document, т.е. такие которые особого отношения к объектной модели документа не имеют.
Свойства и методы объекта document
Объект document содержит следующие «общие» свойства и методы:
- Свойство document.implementation — возвращает объект DOMImplementation, ассоциированный с текущим документом. Например, определим, поддерживается ли указанная возможность в браузере:
Свойство document.characterSet — возвращает кодировку, которая используется для рендеринга текущего документа. Данное значение может отличаться от кодировки указанной в HTML странице, т.к. пользователь может её переопределить, т.е. выбрать в соответствующем меню браузера другую кодировку, которая будет использоваться для отображения текущего документа.
Свойство document.inputEncoding — возвращает кодировку, которая использовалась во время синтаксического разбора (парсинга) документа. Если документ создан в памяти, то данное свойство возвращает значение null . Данное свойство доступно только для чтения.
Свойство document.lastModified — возвращает строку, содержащую дату и время последнего изменения текущего документа. Gecko и Internet Explorer возвращают время в часовом поясе локального компьютера, WebKit — в UTC.
alert(document.lastModified);- uninitialized — процесс загрузки ещё не начался;
- loading — идёт процесс загрузки;
- loaded — загрузка HTML кода завершена;
- interactive — документ достаточно загружен для того, чтобы пользователь мог взаимодействовать с ним. Код JavaScript может начать выполняться только на этом этапе;
- complete — документ полностью загружен.
В большинстве случаев, код JavaScript обычно выполняется и вызывается после того, как документ полностью загружен, т.е. когда он находится в состоянии complete .
document.onreadystatechange = function () { if (document.readyState == "complete") { //выполнить код, после того как документ полностью загружен } }
- Выведем все cookie связанные с текущим документом, т.е. пары ключ=значение : document.cookie ;
- Запишем новый cookie: document.cookie = «test1 = Test1»;
- Запишем ещё один новый cookie: document.cookie = «test2 = Test2»;
- Выведем все cookie связанные с текущим документом: document.cookie .
Метод document.write() — предназначен для вывода в документ строки, указанной в качестве параметра данного метода. Если данный метод вызывается в процессе загрузки документа, то он выводит строку в текущем месте. В том случае, если данный метод вызывается после загрузки документа, то он приводит к полной очистке этого документа и вывода строчки. Это происходит, потому что после загрузки документа браузер уже полностью построил DOM и в документ уже нельзя внести изменения таким способом, а только с помощью добавления узлов в объектную модель документа. Например, вывести строку «I LOVE JAVASCRIPT»:
document.write("I LOVE JAVASCRIPT"); Открыть и сформировать новый документ