Глава 4.4. Элементы и атрибуты

В этой главе мы рассматриваем узлы дерева документа Attr, Element, CharacterData, Text и Comment.

4.4.1. Атрибут: интерфейс Attr

Поддержка: Internet Explorer Поддерживается для XML-документов (XMLDOMAttribute);
              для HTML-документов поддерживается частично.
           Gecko Соответствует стандарту.

Интерфейс Attr соответствует атрибуту элемента XML- или HTML-документа. Он наследует интерфейс Node, но поскольку атрибуты фактически не являются детьми элемента, который они описывают, DOM не считает их частью дерева документа. Поэтому значения свойств parentNode, previousSibling и nextSibling для атрибутов всегда равны null.

В XML значение атрибута представляется узлами типа Text и EntityReference, поскольку здесь значения атрибутов могут содержать ссылки на разделы. В HTML значением атрибута является просто строка типа DOMString.

Свойства интерфейса Attr
Свойство Изменяемое Модель Описание
name Нет DOM 1 Имя атрибута.
ownerElement Нет DOM 2 Элемент-владелец атрибута.
specified Нет DOM 1 Явно ли задан атрибут.
value Да DOM 1 Значение атрибута.

Свойство name

Синтаксис:  атрибут.name
Изменяемое: нет
Поддержка: Internet Explorer Только для XML-документов.
           Gecko Соответствует стандарту.

Свойство name возвращает строку, содержащую имя данного атрибута. Введение этого свойства в DOM не вполне обоснованно, т. к. его значение всегда совпадает со значением свойства nodeName. По этой причине MSHTML это свойство не поддерживает, и в целях совместимости лучше пользоваться свойством nodeName.

Свойство ownerElement

Синтаксис:  атрибут.ownerElement
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство ownerElement возвращает указатель на узел Element, атрибутом которого является данный атрибут, или null, если такого элемента нет. Пример: оператор

alert(document.body.attributes[0].ownerElement.tagName)

выведет на экран строку BODY.

Свойство specified

Синтаксис:  атрибут.specified
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство specified возвращает true, если значение атрибута было явно задано в тексте документа или в сценарии, и false в противном случае. Точнее говоря:

  • если атрибуту присвоено значение в документе или сценарии, то specified равно true, а значением атрибута является присвоенное значение;
  • если атрибуту не присваивалось значение в документе или сценарии и он имеет значение по умолчанию, заданное в DTD, то specified равно false, а значением атрибута является значение по умолчанию;
  • если атрибуту не присваивалось значение в документе или сценарии и он имеет значение #IMPILED в DTD, то этот атрибут не включается в дерево документа;
  • если свойство атрибута ownerElement равно null, то specified равно true.

Свойство value

Синтаксис:  атрибут.value
Изменяемое: да
Исключения: NO_MODIFICATION_ALLOWED_ERR (при записи)
Поддержка: Internet Explorer Только для XML-документов.
           Gecko Соответствует стандарту.

Свойство value позволяет задавать и считывать значение данного атрибута. В HTML его значение всегда совпадает со значением свойства nodeValue. По этой причине MSHTML это свойство не поддерживает, и в целях совместимости лучше пользоваться свойством nodeValue.

В XML значение атрибута может содержать ссылки на разделы, поэтому здесь ситуация немного сложнее. При задании значения этого свойства создается новый узел Text, в который заносится содержимое новой строки без ее анализа XML-процессором. При чтении этого свойства ссылки на разделы заменяются на соответствующий текст, а затем возвращается результирующая строка.

4.4.2. Элемент: интерфейс Element

Поддержка: Internet Explorer Поддерживается для XML-документов (XMLDOMEelement);
              для HTML-документов поддерживается частично.
           Gecko Соответствует стандарту.

Интерфейс Element соответствует элементу XML- или HTML-документа. Он наследует интерфейс Node.

Свойства интерфейса Element
Свойство Изменяемое Модель Описание
tagName Нет DOM 1 Имя тега.
Методы интерфейса Element
Метод Модель Описание
getAttribute DOM 1 Возвращает значение заданного атрибута.
getAttributeNS DOM 2 Возвращает значение заданного атрибута с учетом пространства имен.
getAttributeNode DOM 1 Возвращает заданный узел Attr.
getAttributeNodeNS DOM 2 Возвращает заданный узел Attr с учетом пространства имен.
getElementsByTagName DOM 1 Возвращает список потомков, имеющих заданный тег.
getElementsByTagNameNS DOM 2 Возвращает список потомков, имеющих заданный тег, с учетом пространства имен.
hasAttribute DOM 2 Проверяет наличие заданного атрибута.
hasAttributeNS DOM 2 Проверяет наличие заданного атрибута с учетом пространства имен.
removeAttribute DOM 1 Удаляет заданный атрибут.
removeAttributeNS DOM 2 Удаляет заданный атрибут с учетом пространства имен.
removeAttributeNode DOM 1 Удаляет заданный узел Attr.
setAttribute DOM 1 Добавляет новый атрибут.
setAttributeNS DOM 2 Добавляет новый атрибут с учетом пространства имен.
setAttributeNode DOM 1 Добавляет новый узел Attr.
setAttributeNodeNS DOM 2 Добавляет новый узел Attr с учетом пространства имен.

Свойство tagName

Синтаксис:  элемент.tagName
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство tagName возвращает строку, содержащую имя тега данного элемента. Имя тега HTML всегда преобразуется в прописные буквы, тогда как имя тега XML хранится так, как оно задано в документе. Это свойство является избыточным, т. к. его значение всегда совпадает со значением свойства nodeName. Пример: оператор

alert(document.documentElement.tagName);

выведет на экран строку HTML.

Метод getAttribute

Синтаксис:  элемент.getAttribute(name)
Аргументы:  name — выражение типа DOMString
Результат:  значение типа DOMString
Исключения: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Метод getAttribute возвращает значение атрибута, имеющего имя name. Если атрибут не имеет значения, то возвращается пустая строка. Пример:

<BODY text="blue">
<SCRIPT>
alert(document.body.getAttribute("text"));
</SCRIPT>
</BODY>

Оператор alert в Internet Explorer выведет строку #0000ff, а в Gecko — строку blue.

Метод getAttributeNS

Синтаксис:  элемент.getAttributeNS(namespaceURI, localName)
Аргументы:  namespaceURI, localName — выражения типа DOMString
Результат:  значение типа DOMString
Исключения: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод getAttributeNS возвращает значение заданного атрибута. Если атрибут не имеет значения, то возвращается пустая строка. Этот метод предназначен для XML-документов и для HTML-документов может не поддерживаться. Аргумент namespaceURI задает URI пространства имен, а localName — локальное имя атрибута.

Метод getAttributeNode

Синтаксис:  элемент.getAttributeNode(name)
Аргументы:  name — выражение типа DOMString
Результат:  значение типа Attr или null
Исключения: нет
Поддержка: Internet Explorer Только для XML-документов.
           Gecko Соответствует стандарту.

Метод getAttributeNode возвращает указатель на объект Attr, соответствующий атрибуту с именем name. Если такого атрибута нет, то возвращается null. Пример:

<BODY text="blue">
<SCRIPT>
alert(document.body.getAttributeNode("text").nodeValue);
</SCRIPT>
</BODY>

Оператор alert в Gecko выведет строку blue (Internet Explorer этот метод не поддерживает).

Метод getAttributeNodeNS

Синтаксис:  элемент.getAttributeNodeNS(namespaceURI, localName)
Аргументы:  namespaceURI, localName — выражения типа DOMString
Результат:  значение типа Attr или null
Исключения: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод getAttributeNodeNS возвращает указатель на объект Attr, соответствующий заданному атрибуту. Если такого атрибута нет, то возвращается null. Этот метод предназначен для XML-документов и для HTML-документов может не поддерживаться. Аргумент namespaceURI задает URI пространства имен, а localName — локальное имя атрибута.

Метод getElementsByTagName

Синтаксис:  элемент.getElementsByTagName(tagname)
Аргументы:  tagname — выражение типа DOMString
Результат:  объект NodeList
Исключения: нет
Поддержка: Internet Explorer Соответствует стандарту (см. примечание).
           Gecko Соответствует стандарту.

Метод getElementsByTagName создает новый объект NodeList, состоящий из всех потомков данного элемента типа Element, имеющих заданное имя и возвращает указатель на него. Аргумент tagname задает искомый тег; если он равен "*", то возвращается список всех элементов документа.

Примечание. Internet Explorer не поддерживает специальное имя "*". В нем вместо element.getElementsByTagName("*") следует использовать нестандартное свойство element.all.

Следующий пример выводит на экран количество графических образов в документе, а затем URI первого образа:

var imgList = document.body.getElementsByTagName("IMG");
alert(imgList.length);
alert(imgList[0].src);

Метод getElementsByTagNameNS

Синтаксис:  элемент.getElementsByTagNameNS(namespaceURI, localName)
Аргументы:  namespaceURI, localName — выражения типа DOMString
Результат:  объект NodeList
Исключения: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод getElementsByTagNameNS создает новый объект NodeList, состоящий из всех потомков данного элемента типа Element, имеющих заданное имя и возвращает указатель на него. Он предназначен для XML-документов и для HTML-документов может не поддерживаться. Аргумент namespaceURI задает URI пространства имен, а localName — локальное имя искомого тега в этом пространстве имен; если он равен "*", то возвращается список всех элементов документа, относящихся к данному словарю.

Метод hasAttribute

Синтаксис:  элемент.hasAttribute(name)
Аргументы:  name — выражение типа DOMString
Результат:  логическое значение
Исключения: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Метод hasAttribute возвращает true, если элемент имеет атрибут с именем name, и false в противном случае. Пример:

<BODY text="blue">
<SCRIPT>
alert(document.body.hasAttribute("text"));
alert(document.body.hasAttribute("size"));
</SCRIPT>
</BODY>

Первый оператор alert выведет в Gecko строку true, второй — строку false.

Метод hasAttributeNS

Синтаксис:  элемент.hasAttributeNS(namespaceURI, localName)
Аргументы:  namespaceURI, localName — выражения типа DOMString
Результат:  логическое значение
Исключения: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод hasAttributeNS возвращает true, если элемент имеет заданный атрибут, и false в противном случае. Он предназначен для XML-документов и для HTML-документов может не поддерживаться. Аргумент namespaceURI задает URI пространства имен, а localName — локальное имя атрибута.

Метод removeAttribute

Синтаксис:  элемент.removeAttribute(name)
Аргументы:  name — выражение типа DOMString
Исключения: NO_MODIFICATION_ALLOWED_ERR
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Метод removeAttribute удаляет атрибут с именем name. Если атрибут имеет значение по умолчанию, то он немедленно появляется вновь, со значением по умолчанию. Пример:

var elem = document.getElementsByTagName("BODY")[0];
elem.removeAttribute("text");
alert(elem.getAttribute("text"));

Оператор alert выведет на экран пустую строку.

Метод removeAttributeNS

Синтаксис:  элемент.removeAttributeNS(namespaceURI, localName)
Аргументы:  namespaceURI, localName — выражения типа DOMString
Исключения: NO_MODIFICATION_ALLOWED_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод removeAttributeNS удаляет заданный атрибут. Если атрибут имеет значение по умолчанию, то он немедленно появляется вновь, со значением по умолчанию. Этот метод предназначен для XML-документов и для HTML-документов может не поддерживаться. Аргумент namespaceURI задает URI пространства имен, а localName — локальное имя атрибута.

Метод removeAttributeNode

Синтаксис:  элемент.removeAttributeNode(oldAttr)
Аргументы:  oldAttr — выражение типа Attr
Результат:  объект типа Attr
Исключения: NO_MODIFICATION_ALLOWED_ERR, NOT_FOUND_ERR
Поддержка: Internet Explorer Только для XML-документов.
           Gecko Соответствует стандарту.

Метод removeAttributeNode удаляет заданный узел oldAttr и возвращает указатель на него. Если атрибут имеет значение по умолчанию, то он немедленно появляется вновь, со значением по умолчанию. Пример:

document.body.removeAttributeNode(elem.getAttributeNode("text"));

Метод setAttribute

Синтаксис:  элемент.setAttribute(name, value)
Аргументы:  name, value — выражения типа DOMString
Исключения: INVALID_CHARACTER_ERR, NO_MODIFICATION_ALLOWED_ERR
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Метод setAttribute создает новый атрибут с именем name и значением value. Если атрибут с таким именем уже есть, то ему просто присваивается новое значение. Следующий пример изменяет цвет отображения текста документа на зеленый:

document.body.setAttribute("text", "green");

При работе с XML-документами следует учитывать, что значение value рассматривается как обычная строка и не анализируется XML-процессором. Поэтому если мы хотим присвоить атрибуту значение, содержащее ссылки на разделы, то должны сначала создать новый узел Attr, затем создать необходимые узлы Text и EntityReference, включить их в дерево атрибута и присоединить все созданное дерево к элементу методом setAttributeNode.

Метод setAttributeNS

Синтаксис:  элемент.setAttributeNS(namespaceURI, qualifiedName, value)
Аргументы:  namespaceURI, qualifiedName, value — выражения типа DOMString
Исключения: INVALID_CHARACTER_ERR, NO_MODIFICATION_ALLOWED_ERR, NAMESPACE_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод setAttributeNS создает новый атрибут с заданным именем и значением value. Если атрибут с таким именем уже есть, то ему просто присваивается новое значение. Этот метод предназначен для XML-документов и для HTML-документов может не поддерживаться. Аргумент namespaceURI задает URI пространства имен, а qualifiedName — ограниченное имя атрибута. При работе с XML-документами следует учитывать замечания к методу setAttribute.

Метод setAttributeNode

Синтаксис:  элемент.setAttributeNode(newAttr)
Аргументы:  newAttr — выражение типа Attr
Результат:  объект типа Attr или null
Исключения: WRONG_DOCUMENT_ERR, NO_MODIFICATION_ALLOWED_ERR, INUSE_ATTRIBUTE_ERR
Поддержка: Internet Explorer Только для XML-документов.
           Gecko Соответствует стандарту.

Метод setAttributeNode добавляет к данному элементу новый узел newAttr. Если атрибут с именем newAttr.nodeName уже есть, то он заменяется на новый узел, а указатель на старый узел возвращается в качестве результата. Если такого атрибута нет, то возвращается null. Пример:

var attr = document.createAttribute("temp");
attr.value = "temporary";
document.body.setAttributeNode(attr);
alert(document.body.getAttribute("temp"));

Оператор alert в Gecko выведет на экран строку temporary.

Метод setAttributeNodeNS

Синтаксис:  элемент.setAttributeNodeNS(newAttr)
Аргументы:  newAttr — выражение типа Attr
Результат:  объект типа Attr или null
Исключения: WRONG_DOCUMENT_ERR, NO_MODIFICATION_ALLOWED_ERR, INUSE_ATTRIBUTE_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод setAttributeNodeNS добавляет к данному элементу новый узел newAttr. Если атрибут с такими же newAttr.localName и newAttr.namespaceURI уже есть, то он заменяется на новый узел, а указатель на старый узел возвращается в качестве результата. Если такого атрибута нет, то возвращается null. Этот метод предназначен для XML-документов и для HTML-документов может не поддерживаться.

4.4.3. Символьные данные: интерфейс CharacterData

Поддержка: Internet Explorer Поддерживается для XML-документов (XMLDOMCharacterData);
              для HTML-документов поддерживается частично.
           Gecko Соответствует стандарту.

Интерфейс CharacterData инкапсулирует свойства и методы, присущие узлам, содержащим текстовые данные. Самостоятельно он не употребляется, а только служит прототипом для интерфейсов Text и Comment. Этот интерфейс спроектирован так, чтобы поддерживать большие объемы текстовой информации в XML-документах, которые могут не помещаться в символьные строки сценарных языков. Для HTML-документов эта проблема не актуальна, и мы можем работать с содержимым текстовых узлов как с обычными строками JavaScript. Напомним, что текстовые строки представляются в DOM строками символов формата UTF-16, а нумерация символов в строке начинается с нуля.

Свойства интерфейса CharacterData
Свойство Изменяемое Модель Описание
data Да DOM 1 Символьные данные узла.
length Нет DOM 1 Количество символов в data.
Методы интерфейса CharacterData
Метод Модель Описание
appendData DOM 1 Добавляет строку в конец данных узла.
deleteData DOM 1 Удаляет фрагмент данных узла.
insertData DOM 1 Вставляет строку в заданное место данных узла.
replaceData DOM 1 Заменяет фрагмент данных узла на новую строку.
substringData DOM 1 Извлекает фрагмент данных узла.

Свойство data

Синтаксис:  узел.data
Изменяемое: да
Исключения: NO_MODIFICATION_ALLOWED_ERR (при записи), DOMSTRING_SIZE_ERR (при чтении)
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство data задает или возвращает строку, содержащую текстовое содержимое данного узла. Пример:

var node = document.createTextNode("Мой текст");
node.data = "Новый текст";
alert(node.data);

Оператор alert выведет на экран строку Новый текст.

Свойство length

Синтаксис:  узел.length
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство length возвращает беззнаковое целое число, равное количеству символов в текстовом содержимом узла. Пример:

var node = document.createTextNode("Мой текст");
alert(node.length);

Оператор alert выведет на экран число 9.

Метод appendData

Синтаксис:  элемент.appendData(arg)
Аргументы:  arg — выражение типа DOMString
Исключения: NO_MODIFICATION_ALLOWED_ERR
Поддержка: Internet Explorer Только для XML-документов.
           Gecko Соответствует стандарту.

Метод appendData добавляет в конец текстового содержимого узла строку arg. Пример:

var node = document.createTextNode("12345");
node.appendData("67890");
alert(node.data);

Оператор alert выведет в Gecko на экран строку 1234567890. В Internet Explorer вместо этого метода следует использовать оператор node.data += arg.

Метод deleteData

Синтаксис:  элемент.deleteData(offset, count)
Аргументы:  offset, count — неотрицательные целые выражения
Исключения: NO_MODIFICATION_ALLOWED_ERR, INDEX_SIZE_ERR
Поддержка: Internet Explorer Только для XML-документов.
           Gecko Соответствует стандарту.

Метод deleteData удаляет фрагмент текстового содержимого узла длиной count символов, начиная с позиции offset. Если count + offset > length, то удаляется подстрока, начиная с позиции offset и до конца данных. Если offset отрицателен или больше length, либо если count отрицателен, то генерируется исключение INDEX_SIZE_ERR. Пример:

var node = document.createTextNode("12345");
node.deleteData(1, 3);
alert(node.data);

Оператор alert выведет в Gecko на экран строку 15. В Internet Explorer вместо этого метода следует использовать оператор node.data = node.data.substr(0, offset) + node.data.substr(offset+count).

Метод insertData

Синтаксис:  элемент.insertData(offset, arg)
Аргументы:  offset — неотрицательное целое выражение
            arg — выражение типа DOMString
Исключения: NO_MODIFICATION_ALLOWED_ERR, INDEX_SIZE_ERR
Поддержка: Internet Explorer Только для XML-документов.
           Gecko Соответствует стандарту.

Метод insertData вставляет строку arg в текстовое содержимое, начиная с позиции offset. Если offset отрицателен или больше length, то генерируется исключение INDEX_SIZE_ERR. Пример:

var node = document.createTextNode("12345");
node.insertData(0, "0");
alert(node.data);

Оператор alert выведет в Gecko на экран строку 012345. В Internet Explorer вместо этого метода следует использовать оператор
node.data = node.data.substr(0, offset) + arg + node.data.substr(offset).

Метод replaceData

Синтаксис:  элемент.replaceData(offset, count, arg)
Аргументы:  offset, count — неотрицательные целые выражения
            arg — выражение типа DOMString
Исключения: NO_MODIFICATION_ALLOWED_ERR, INDEX_SIZE_ERR
Поддержка: Internet Explorer Только для XML-документов.
           Gecko Соответствует стандарту.

Метод replaceData заменяет фрагмент текста длиной count символов, начиная с позиции offset, на строку arg. Если offset отрицателен или больше length, либо count отрицателен, то генерируется исключение INDEX_SIZE_ERR. Пример:

var node = document.createTextNode("12345");
node.replaceData(0, 3, "678");
alert(node.data);

Оператор alert выведет в Gecko на экран строку 67845. В Internet Explorer вместо этого метода следует использовать оператор
node.data = node.data.substr(0, offset) + arg + node.data.substr(offset+count).

Метод substringData

Синтаксис:  элемент.substringData(offset, count)
Аргументы:  offset, count — неотрицательные целые выражения
Результат:  значение типа DOMString
Исключения: DOMSTRING_SIZE_ERR, INDEX_SIZE_ERR
Поддержка: Internet Explorer Только для XML-документов.
           Gecko Соответствует стандарту.

Метод substringData возвращает фрагмент текстового содержимого узла длиной count символов, начиная с позиции offset. Если count + offset > length, то возвращается подстрока, начиная с позиции offset и до конца данных. Текстовое содержимое узла не изменяется. Если offset отрицателен или больше length, либо если count отрицателен, то генерируется исключение INDEX_SIZE_ERR. Пример:

var node = document.createTextNode("12345");
alert(node.substringData(1, 3));

Оператор alert выведет в Gecko на экран строку 234. В Internet Explorer вместо этого метода следует использовать оператор node.data.substr(offset, count).

4.4.4. Текстовый узел: интерфейс Text

Поддержка: Internet Explorer Поддерживается для XML-документов (XMLDOMText);
              для HTML-документов поддерживается частично.
           Gecko Соответствует стандарту.

Интерфейс Text реализует текстовое содержимое элементов и атрибутов. Он наследует все свойства и методы интерфейса CharacterData и имеет единственный собственный метод splitText.

Метод splitText

Синтаксис:  элемент.splitText(offset)
Аргументы:  offset — неотрицательное целое выражение
Результат:  новый узел Text
Исключения: NO_MODIFICATION_ALLOWED_ERR, INDEX_SIZE_ERR
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Метод splitText расщепляет текстовый узел на два узла, которые являются братьями в дереве документа. Старый узел будет содержать свое исходное содержимое до позиции offset исключительно, а новый узел — исходное содержимое, начиная с позиции offset и до конца текста. Если offset отрицателен или больше length, то генерируется исключение INDEX_SIZE_ERR. Пример:

var node = document.createTextNode("0123456789");
var newnode = node.splitText(5);
alert(node.data);
alert(newnode.data);

Первый оператор alert выведет на экран строку 01234, а второй — строку 56789.

4.4.5. Комментарий: интерфейс Comment

Поддержка: Internet Explorer Поддерживается только для XML-документов (XMLDOMComment).
           Gecko Соответствует стандарту.

Интерфейс Comment реализует комментарии XML- и HTML-документов. Он наследует все свойства и методы интерфейса CharacterData и содержит текст комментария, т. е. все, что находится между ограничителями <!-- и -->. Собственных свойств и методов у него нет.