Интерфейс Element

Интерфейс Element представляет элемент HTML в документе. Этот элемент наследует свойства и методы интерфейса Node, а также имеет свойство tagName (только для чтения), возвращающее имя тега для данного элемента.

Для интерфейса Element определены следующие методы для выполнения операций над атрибутами элемента:

· getAttribute(имя) – возвращает строковое значение атрибута с указанным именем;

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

· setAttribute(имя, значение) – добавляет атрибут с указанным именем и значением или изменяет значение атрибута, если атрибут с указанным именем уже есть (не возвращает значения);

· setAttributeNode(узел) – добавляет узел или изменяет значение узла (если такой узел уже есть) для объекта типа Attr и возвращает добавленный или измененный узел;

· removeAttribute(имя) – удаляет атрибут с указанным именем (не возвращает значения);

· removeAttributeNode(имя)– удаляет узел (объект типа Attr) для атрибута с указанным именем и возвращает удаленный узел.

Кроме этого, для интерфейса определен метод

getElementsByTagName(имя-тега),

возвращающий все узлы (объект NodeList), содержащие элемент с указанным именем-тега. Каждый из узлов имеет тип Element.

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

1. Предложение

alert("tagName='" + document.getElementById("i2").tagName +

"'");

для документа HTML из примера 4.5.1, выведет имя тега для элемента с id="i2":

2. Задание границы шириной 3 пикселя для таблицы, созданной в примере 4.5.7 (добавление атрибута border для элемента table):

var tableNode = document.getElementsByTagName("table")[0];

tableNode.setAttribute("border","3");

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

3. Предложение

alert("Количество абзацев в документе=" +

bodyElement.getElementsByTagName("p").length);

для документа HTML в примере 4.5.1 (с учетом изменений, произведенных в примерах 4.5.5) и 4.5.7) выведет количество абзацев в теле документа:

4. Предложение

alert("src='" +

document.getElementById("i2").getAttribute("src") + "'");

для документа HTML в примере 4.5.1, выведет значение атрибута src в элементе с id="i2":

5. Предложение

document.getElementById("i2").setAttribute("src",

"images/StylesStylesheet.png");

для документа HTML в примере 4.5.1 (с учетом изменений, произведенных в примерах 4.5.5 и 4.5.7), переопределит значение атрибута src в элементе с id="i2" (задаст другое изображение), а предложения

// Определение элемента с id="i2"

imgElement = document.getElementById("i2");

// Определение абзаца,

// следующего за элементом с id="i2"

parElement = imgElement.nextSibling;

// Создание абзаца для подписи под рисунком

imageLabel = document.createElement("p");

// Установка для подписи атрибута id

imageLabel.setAttribute("id", "imageLabel1");

// Добавление текста к подписи

imageLabel.appendChild(document.createTextNode(

"Рис.1.1. Пример использования блоковых элементов"));

// Вставка подписи под рисунком

bodyElement.insertBefore(imageLabel, parElement);

создадут и вставят подпись под рисунком.

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

6. Выражение

document.getElementById("i2").removeAttribute("id");

для документа HTML в примере 4.5.1 (с учетом изменений, произведенных в примерах 4.5.5 и 4.5.7), удалит атрибут id из элемента img. Последующее обращение к этому элементу с помощью метода getElementById() приведет к ошибке в программе.