Краткое описание интерфейса Element

13. Объектная модель документа. DOM W3C

Краткое описание интерфейса `Element`

Свойства интерфейса `Element`

tagName

Только для чтения. Содержит имя тега элемента.

Свойства подинтерфейса `HTMLElement`

id, style, title, lang, dir, className

Эти свойства обеспечивают удобный доступ к значениям атрибутов id, style, title, lang, dir и class, которыми обладают все HTML-элементы.

Заметим, что свойство style является не строкой, а объектом, свойства которого соответствуют одноименным CSS-свойствам (см. заметку 12).

innerHTML

Строка, которая содержит HTML-код, внутри элемента (за исключением открывающего и закрывающего тегов самого элемента). Запись в это свойство строки, содержащей HTML-код, приводит к изменению документа на экране и меняет его DOM в памяти. Это нестандартное свойство, но его поддерживают (и будут поддерживать) все браузеры.

offsetHeiht, offsetWidth

Высота и ширина элемента в пикселах, включая внутренние отступы и рамки, но без учета внешних отсупов. Это нестандартные, но широко поддерживаемые свойства.

offsetLeft, offsetTop

Координаты X и Y верхнего левого угла рамки элемента, относительно контейнерного элемента offsetParent. Это нестандартные, но широко поддерживаемые свойства.

offsetParent

Указывает на контейнерный элемент, определяющий систему координат данного элемента (первый позиционируемый предок или document). Это нестандартное, но широко поддерживаемое свойство.

scrollHeiht, scrollWidth

Общая высота и ширина элемента в пикселах. Когда элемент имеет полосы прокрутки (например, задано CSS-свойство overflow), значения этих свойств отличаются от значений свойств offsetHeiht и offsetWidth, которые содержат размер видимой части элемента. Это нестандартные, но широко поддерживаемые свойства.

scrollLeft, scrollTop

Число пикселов, на которые элемент был прокручен. Свойство полезно для элементов с полосами прокрутки. Это нестандартные, но широко поддерживаемые свойства.

Методы

addEventListener(тип, обработчик, фазаЗахвата)

Добавляет функцию-обработчик события в набор обработчиков событий элемента. Обработке событий в DOM W3C будет посвящена отдельная заметка 14, в ней этот метод (и метод, который удаляет обработчик) рассматривается подробно.

getAttribute(name)

Возвращает строковое значение атрибута с указанным именем. Если значение атрибута не указано, возвращается пустая строка (некоторые бразеры возвращают null). Так как стандартные атрибуты легко доступны по формуле: элемент.атрибут, то методы getAttribute и setAttribute обычно применяют тогда, когда программист создает в элементе собственные (нестандартные атрибуты).

Пример


// Получить ссылку на картинку с id="pic"
var pic = document.getElementById("pic");
// Получить ссылку на файл с картинкой
var fpic1 = pic.getAttribute("scr");
// Получить ссылку на файл с картинкой (более простой способ)
var fpic2 = pic.scr;

getElementsByTagName(name)

Возвращает объект подобный массиву с элементами потомками данного элемента с указанным именем тега. В качестве имени тега можно указывать "*" (все элементы-потомки).

Пример


// Находим все элементы TABLE в документе
var tables = document.body.getElementsByTagName("table")
// Находим первую строку в первой таблице
var tr = tables[0].getElementsByTagName("tr")[0];

hasAttributes(name)

Возвращает true, если в элементе есть атрибут с указанным именем.

removeAttribute(name)

Удаляет атрибут с указанным именем из элемента. Попытка удалить несуществующие атрибуты игнорируется (не приводит к ошибке).

setAttribute(name, value)

Создает или изменяет значение атрибута. Так как стандартные атрибуты легко доступны по формуле: элемент.атрибут, то методы getAttribute и setAttribute обычно применяют тогда, когда программист создает в элементе собственные (нестандартные атрибуты).

13. Объектная модель документа. DOM W3C