Интерфейс Document

Интерфейс Document представляет весь документ HTML.

Для этого интерфейса определены свойства documentElement и doctype, возвращающие соответственно корневой узел данного документа и узел типа DocumentType. Оба свойства доступны только для чтения. Свойство doctype не определено в Internet Explorer.

 

Пример 4.5.4. Использование свойств интерфейса Document:

1. Получение характеристик и атрибутов корневого узла

// Вывод характеристик узла

// для корневого узла (свойства documentElement)

alert("documentElementName=" +

document.documentElement.nodeName +

"\ndocumentElementType=" +

document.documentElement.nodeType +

"\ndocumentElementValue=" +

document.documentElement.nodeValue);

// Получение списка атрибутов корневого узла

documentElementAttrs = document.documentElement.attributes;

// Начальное значение строки вывода

output = "Количество атрибутов: " +

documentElementAttrs.length;

// Получение имен и значений атрибутов в цикле

for(i=0;i<documentElementAttrs.length;i++)

// Получение имени и значения текущего атрибута

output += "\n" + (i + 1) + ". Имя=" +

documentElementAttrs[i].nodeName +

" Значение='" +

documentElementAttrs[i].nodeValue + "'";

// Вывод имен и значений атрибутов корневого узла

alert(output);

Вывод фрагмента (в Web-браузере Firefox) имеет следующий вид:

 

2. Получение характеристик и атрибутов узла doctype

// Вывод характеристик узла для свойства doctype

alert("documentDoctypeName=" + document.doctype.nodeName +

"\ndocumentDoctypeType=" + document.doctype.nodeType +

"\ndocumentDoctypeValue=" + document.doctype.nodeValue);

Вывод фрагмента (в Web-браузере Firefox) имеет следующий вид:

 

Для интерфейса Document определены следующие методы создания узлов разных типов в документе:

· createDocumentFragment() – создает пустой узел типа DocumentFragment с именем #document-fragment и возвращает созданный узел;

· createElement(имя-тега)– создает новый узел типа Element с заданным именем-тега и возвращает созданный узел;

· createTextNode(содержимое)– создает новый узел типа Text с именем #text и с указанным текстовым содержимым и возвращает созданный узел;

· createAttribute(имя-атрибута)– создает новый узел типа Attr с заданным именем-атрибута и возвращает созданный узел;

· createComment(данные) – создает новый узел типа Comment с указанным текстовым содержимым и возвращает созданный узел.

В интерфейсе Document определены также два метода получения узлов типа Element:

· getElementById(значение-атрибута-id)– возвращает узел (Node) типа Element с заданным значением атрибута id (если в документе несколько элементов с одинаковым значением атрибута id, возвращается только первый элемент);

· getElementsByTagName(имя-тега) – возвращает список (NodeList) узлов типа Element с заданным именем-тега.

Кроме того, интерфейс Document наследует все свойства и методы интерфейса Node.

 

Пример 4.5.5. Использование методов интерфейса Document:

1. Добавление нового абзаца в документ HTML в примере 4.5.1:

// Получение элемента body

var bodyElement = document.getElementsByTagName("body")[0];

// Создание нового абзаца (элемента p)

var newPar = document.createElement("p");

 

// Ввод содержимого нового абзаца

// с помощью функции prompt

var content =

prompt ("Введите содержание нового абзаца","");

// Создание нового текстового узла

// с введенным содержимым

var newParContent = document.createTextNode(content);

// Добавление нового абзаца

// к дочерним узлам элемента body

bodyElement.appendChild(newPar);

// Добавление текстового узла

// как дочернего узла элемента p

newPar.appendChild(newParContent);

Вывод Web-страницы имеет следующий вид:

 

2. Добавление заголовка в начало тела документа HTML в примере 4.5.1 (используется элемент bodyElement из примера 4.5.5(1) и учитываются изменения, произведенные в этом примере):

// Ввод содержимого заголовка с помощью функции prompt

var heading = prompt("Введите заголовок документа","");

// Создание заголовка с помощью элемента h1

var headingNode = document.createElement("h1");

// Создание текстового узла для заголовка

var headingContent = document.createTextNode(heading);

// Вставка заголовка в тело документа перед абзацем

bodyElement.insertBefore(headingNode,

bodyElement.firstChild);

// Вставка текстового узла в заголовок

headingNode.appendChild(headingContent);

Вывод Web-страницы имеет следующий вид:

 

3. Замена выделения жирным шрифтом и курсивом (элемент span) на подчеркивание (элемент u) для документа HTML в примере 4.5.1 (учитываются изменения, произведенные в примерах 4.5.5(1) и 4.5.5(2)):

// Создание заменяющего элемента u

var replacingNode = document.createElement("u");

// Получение заменяемого элемента span

var replacedNode = document.getElementById("sp1");

// Получение текстового содержимого

// заменяемого элемента span

var replacing = replacedNode.firstChild.nodeValue;

// Замена элементов

document.getElementById("p1").replaceChild(replacingNode,

replacedNode);

// Создание текстового узла для элемента u

var replacingContent = document.createTextNode(replacing);

// Добавление текстового узла

// как дочернего узла элемента u

replacingNode.appendChild(replacingContent);

Вывод Web-страницы имеет следующий вид:

 

4. Удаление рисунка с id="i1" из документа HTML в примере 4.5.1:

// Определение элемента p

p1Element = document.getElementById("p1");

// Удаление рисунка с id="img1"

p1Element.removeChild(document.getElementById("i1"));

Вывод Web-страницы имеет следующий вид: