Добавляем...


Сведение к объектной модели документа
Модель DOM уровня 1 пытается стандартизировать объект Document JavaScript в области поддержки произвольных элементов HTML и текстовых объектов, в то же время обеспечивая поддержку наиболее широко используемых свойств, коллекций и методов объекта Document. Обратная совместимость, часто связываемая с DOM уровня 0, достаточно хорошо согласуется с тем, что предлагалось в Netscape 3, за исключением доступа JavaScript к модулям расширений. Свойства объекта Document, поддерживаемые в DOM уровня 1, представлены в таблице.

Свойство или коллекция объекта Document Описание
anchors[] Коллекция анкеров, заданных с помощью <a пате="имя">
applets[] Коллекция аплетов Java на странице, заданных с помощью дескрипторов <applet>
body Ссылка на объект, представляющий дескриптор <body>, содержащий отображаемый документ
cookie Строка, содержащая значение cookie документа, если таковое имеется
doсtype Ссылка на шаблон DTD (Document Type Definition — определение типа документа) документа
documentElement Ссылка на корневой элемент документа (в HTML это дескриптор <html>)
domain Область защиты документа
forms[] Дескрипторы <form> на странице
images[] Коллекция изображений, определенных с помощью <img>
implementation Ссылка на объект, который может определять возможности языка разметки данного документа
links[] Содержит адрес URL ссылающегося объекта, если он определен
referrer Коллекция ссылок, указанных дескрипторами <а> и <агеа> документа
title Заголовок документа
URL Строка, содержащая адрес URL документа


Обратите внимание на то, что в DOM сохраняется поддержка многих обсуждавшихся выше коллекций и добавляется лишь несколько свойств, таких как body, docType и documentElement. Единственным отсутствующим свойством является lastModified, но, к счастью, браузеры продолжают его поддерживать.

Что касается методов, то традиционно объект Document поддерживает только open(), close(), clear(), write() и writeln(). В модели DOM уровня 1 отказались от поддержки метода clear(), который никогда по-настоящему и не использовался. Однако, кроме статических по своим действиям методов write(), модель DOM предлагает и множество методов, предназначенных для динамического создания объектов. В нее добавлен, например, метод createComment {данные), который создает комментарий (X)HTML вида <! -- данные —>, createElement {дескриптор), который создает элемент (X)HTML соответствующего типа, и createTextNode {данные), который создает текстовый узел, содержащий значение параметра данные. Имеются и другие "создающие" методы DOM, но их польза при работе с документами HTML весьма ограничена.

Мы также видели в разделе "Другие свойства доступа", что в DOM добавлены три полезных метода для выяснения адреса назначения документа:
  • document.getElementById(idЭлемента) — возвращает ссылку на объект с id= "idЭлемента";
  • document.getElementsByName(имяЭлемента) — возвращает список всех объектов элементов (X)HTML с name= "имяЭлемента";
  • document. getElementsByTagName(дескриптор) — возвращает список всех элементов (X)HTML указанного параметром дескриптор типа (например, STRONG).
Получив объект, мы можем посмотреть на его свойства. Например, снова вспомним из главы 10, что каждый узел DOM, включающий элемент (X)HTML, будет иметь набор свойств, связанных с его размещением в дереве документа; это parentNode, childNodes.firstChild, lastChild, previousSibling и next Sibling. Есть также множество методов, например insertBefore(), для добавления узлов в документ — как дескрипторов HTML, так и узлов текста. Имеются также свойства для работы со значениями атрибутов, но чаще всего это проще выполнить непосредственно, как мы продемонстрируем позже.

Следует также понимать, что кроме свойств, определенных в рамках DOM, в соответствии с HTML 4 и XHTML все элементы имеют общий набор свойств, связанных с элементами сценария, таблицами стилей и возможностями доступа (id, class, style и title), а также с использованием языка (lang и dir). Соединив все это, вы получите комплект свойств и методов, общих для любого элемента HTML, представленного в JavaScript. В DOM этот объект называется HTMLElement, а его свойства и методы приводятся в таблице ниже.

Свойство или коллекция объекта HTMLElement Описание
attributes[ ] Коллекция атрибутов элемента, если таковые имеются
childNodes[ ] Коллекция узлов (узлы текста, элементы и т.д.), включенных в данный элемент HTML
className Значение атрибута class
dir Направление текста: LTR (left to right — слева на право) или RTL (right to left — справа налево), в соответствии с установками атрибута dir
firstChild Ссылка на первый узел, непосредственно включенный в текущий элемент HTML. То же, что и element. childNodes[0]. Дочерние узлы могут быть любого типа, а не только элементами HTML
id Текстовая строка, соответствующая значению атрибута id элемента
lang Код языка, заданный атрибутом iang элемента
lastChild Ссылка на последний дочерний элемент в списке дочерних узлов, являющихся прямыми потомками текущего элемента HTML
nodeName Название элемента HTML, например Р. Тоже, что и tagName
nodeValue Значение узла. Это свойство всегда равно null в случае элементов HTML
nodeType Числовой код для типа узла. В случае элементов HTML всегда равно 1
nextSibling Ссылка на следующий сестринский узел D0M текущего элемента HTML
ownerDocument Ссылка на объект Document, содержащий текущий элемент
parentNode Ссылка на объемлющий элемент HTML
previousSibling Ссылка на предыдущий сестринский узел DOM текущего элемента HTML
style Доступ к внутристрочным спецификациям стиля для данного элемента. Это свойство D0M уровня 2
tagName Ссылка на имя элемента HTML, например OL. То же, что и nodeName, в случае узлов элементов
title Строка с текстом подсказки, установленным с помощью атрибута title элемента


Общие методы объекта HTMLElement

Имя метода Описание
appendChild (newChild) Добавляет узел newChild в качестве последнего дочернего для текущего элемента
cloneNode (deep) Делает копию текущего элемента HTML. Если параметр deep равен true, копия будет содержать все узлы, включенные в данный элемент
getAttribute (ИМЯ) Возвращает значение атрибута, указанного параметром имя. Проще ссылаться прямо через имя атрибута, если оно известно. Например, если myP1 представляет абзац, то myP1. align будет содержать значение его атрибута align
getElementsByTagName (tagName) Возвращает список элементов, указанных параметром tagName, содержащихся в рамках данного элемента
hasChildNodes() Возвращает значение типа Boolean, указывающее, имеет ли текущий элемент дочерние (вложенные элементы или узлы текста)
insertBefore( newChild, refChild) Вставляет узел newChild в список дочерних узлов данного элемента непосредственно перед узлом, указанным аргументом refChild
removeAttribute (ИМЯ) Удаляет атрибут, указанный параметром имя. Например, myP1. removeAttribute ("align") удалит атрибут align для абзаца myP1. Конечно, проще присвоить атрибуту его значение по умолчанию
removeChild (OldChild) Удаляет узел, указанный аргументом oldChild
replaceChild (newChild, oldChild) Заменяет узел oldChild новым узлом newChild
setAttribute (имя, значение) Устанавливает значение атрибута. Проще использовать прямую ссылку, если известно имя атрибута. Например, если myP1 соответствует абзацу, то тур; align будет содержать значение атрибута align этого абзаца


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика