ES6 - HTML DOM
Каждая веб-страница находится внутри окна браузера, которое можно рассматривать как объект.
А document objectпредставляет HTML-документ, отображаемый в этом окне. Объект документа имеет различные свойства, которые относятся к другим объектам, которые позволяют получить доступ к содержимому документа и изменить его.
Способ доступа к содержимому документа и его изменения называется Document Object Model, или же DOM. Объекты организованы в иерархию. Эта иерархическая структура применяется к организации объектов в веб-документе.
Ниже приводится простая иерархия нескольких важных объектов.
Существует несколько моделей DOM. В следующих разделах подробно описывается каждая из этих моделей DOM и описывается, как их можно использовать для доступа и изменения содержимого документа.
The Legacy DOM- Это модель, которая была представлена в ранних версиях языка JavaScript. Он хорошо поддерживается всеми браузерами, но позволяет получить доступ только к определенным ключевым частям документов, таким как формы, элементы форм и изображения.
The W3C DOM- Эта объектная модель документа обеспечивает доступ и изменение всего содержимого документа и стандартизована Консорциумом World Wide Web (W3C). Эта модель поддерживается практически всеми современными браузерами.
The IE4 DOM- Эта объектная модель документа была представлена в версии 4 браузера Microsoft Internet Explorer. IE 5 и более поздние версии включают поддержку большинства основных функций W3C DOM.
Унаследованная модель DOM
Это модель, которая была представлена в ранних версиях языка JavaScript. Он хорошо поддерживается всеми браузерами, но позволяет получить доступ только к определенным ключевым частям документов, таким как формы, элементы форм и изображения.
Эта модель предоставляет несколько свойств, доступных только для чтения, таких как title, URL и lastModified, которые предоставляют информацию о документе в целом. Кроме того, в этой модели есть различные методы, которые можно использовать для установки и получения значений свойств документа.
Свойства документа в устаревшей модели DOM
Ниже приводится список свойств документа, к которым можно получить доступ с помощью Legacy DOM.
Старший Нет | Описание недвижимости |
---|---|
1 |
alinkColor Не рекомендуется - строка, определяющая цвет активированных ссылок. Example : document.alinkColor |
2 |
anchors[ ] Массив объектов привязки, по одному для каждой привязки, которая появляется в документе. Example : document.anchors [0], document.anchors [1] и т. д. |
3 |
applets[ ] Массив объектов апплета, по одному для каждого апплета, который появляется в документе. Example : document.applets [0], document.applets [1] и т. д. |
4 |
bgColor Не рекомендуется - строка, определяющая цвет фона документа. Example : document.bgColor |
5 |
Cookie Свойство со строковым значением со специальным поведением, которое позволяет запрашивать и устанавливать файлы cookie, связанные с этим документом. Example : document.cookie |
6 |
Domain Строка, указывающая интернет-домен, из которого принадлежит документ. Используется в целях безопасности. Example : document.domain |
7 |
embeds[ ] Массив объектов, представляющих данные, встроенные в документ с помощью тега <embed>. Синоним плагинов []. Некоторыми плагинами и элементами управления ActiveX можно управлять с помощью кода JavaScript. Example : document.embeds [0], document.embeds [1] и т. д. |
8 |
fgColor Строка, определяющая цвет текста по умолчанию для документа. Example : document.fgColor |
9 |
forms[ ] Массив объектов формы, по одному для каждой HTML-формы, отображаемой в документе. Example : document.forms [0], document.forms [1] и т. д. |
10 |
images[ ] Массив объектов формы, по одному для каждой HTML-формы, которая появляется в документе с тегом HTML <img>. Example : document.forms [0], document.forms [1] и т. д. |
11 |
lastModified Строка только для чтения, указывающая дату самого последнего изменения документа. Example : document.lastModified |
12 |
linkColor Устарело - строка, определяющая цвет непосещенных ссылок. Example : document.linkColor |
13 |
links[ ] Это массив ссылок на документы. Example : document.links [0], document.links [1] и т. д. |
14 |
Location URL-адрес документа. Устарело в пользу свойства URL. Example : document.location |
15 |
plugins[ ] Синоним встраивания [] Example : document.plugins [0], document.plugins [1] и т. д. |
16 |
Referrer Строка только для чтения, содержащая URL-адрес документа, если таковой имеется, из которого был связан текущий документ. Example : document.referrer |
17 |
Title Текстовое содержимое тега <title>. Example : название документа |
18 |
URL Строка только для чтения, указывающая URL-адрес документа. Example : document.URL |
19 |
vlinkColor Не рекомендуется - строка, определяющая цвет посещенных ссылок. Example : document.vlinkColor |
Методы документа в устаревшей модели DOM
Ниже приводится список методов, поддерживаемых Legacy DOM.
Старший Нет | Описание недвижимости |
---|---|
1 |
clear( ) Устарело - удаляет содержимое документа и ничего не возвращает. Example : document.clear () |
2 |
close( ) Закрывает поток документов, открытый с помощью метода open (), и ничего не возвращает. |
3 |
open( ) Удаляет существующее содержимое документа и открывает поток, в который может быть записано новое содержимое документа. Ничего не возвращает. Example : document.open () |
4 |
write( value, ...) Вставляет указанную строку или строки в документ, который в данный момент анализируется, или добавляет в документ, открытый с помощью open (). Ничего не возвращает. Example : document.write (значение, ...) |
5 |
writeln( value, ...) Идентичен write (), за исключением того, что добавляет к выводу символ новой строки. Ничего не возвращает. Example : document.writeln (значение, ...) |
Мы можем найти любой HTML-элемент в любом HTML-документе с помощью HTML DOM. Например, если веб-документ содержит элемент формы, то, используя JavaScript, мы можем ссылаться на него как на document.forms [0]. Если ваш веб-документ включает два элемента формы, первая форма называется document.forms [0], а вторая - document.forms [1].
Используя иерархию и свойства, указанные выше, мы можем получить доступ к первому элементу формы, используя document.forms [0] .elements [0] и так далее.
пример
Ниже приведен пример доступа к свойствам документа с использованием устаревшего метода DOM.
<html>
<head>
<title> Document Title </title>
<script type = "text/javascript">
<!--
function myFunc() {
var ret = document.title;
alert("Document Title : " + ret );
var ret = document.URL;
alert("Document URL : " + ret );
var ret = document.forms[0];
alert("Document First Form : " + ret );
var ret = document.forms[0].elements[1];
alert("Second element : " + ret );
} //
-->
</script>
</head>
<body>
<h1 id = "title">This is main title</h1>
<p>Click the following to see the result:</p>
<form name = "FirstForm">
<input type = "button" value = "Click Me" onclick = "myFunc();" />
<input type = "button" value = "Cancel">
</form>
<form name = "SecondForm">
<input type = "button" value = "Don't ClickMe"/>
</form>
</body>
</html>
Вывод
Следующий вывод отображается при успешном выполнении вышеуказанного кода.
Note- В этом примере возвращаются объекты для форм и элементов. Нам нужно будет получить доступ к их значениям, используя те свойства объекта, которые не обсуждаются в этом руководстве.