Объект Element HTML DOM

Объект Element

В HTML DOM объект Element представляет HTML-элемент, такой как P, DIV, A, TABLE или любой другой HTML-элемент.

Атрибуты и методы

Следующие атрибуты и методы доступны для всех элементов HTML:

Атрибут / Метод Описание
accessKey Установить или вернуть значение атрибута accesskey элемента.
addEventListener() Прикрепить обработчик событий к элементу.
appendChild() Добавить (прикрепить) новый подузел к элементу.
attributes Вернуть NamedNodeMap свойств элемента.
blur() Убрать фокус с элемента.
childElementCount Вернуть количество подэлементов элемента.
childNodes Вернуть NodeList всех подузлов элемента.
children Вернуть HTMLCollection всех подэлементов элемента.
classList Вернуть имя класса элемента.
className Установить или вернуть значение атрибута class элемента.
click() Имитировать клик мыши по элементу.
clientHeight Вернуть высоту элемента, включая отступы.
clientLeft Вернуть ширину левого края рамки элемента.
clientTop Вернуть ширину верхнего края рамки элемента.
clientWidth Вернуть ширину элемента, включая отступы.
cloneNode() Клонировать элемент.
closest() Искать наиболее близкий элемент в дереве DOM, соответствующий CSS-селектору.
compareDocumentPosition() Сравнение документных положений двух элементов.
contains() Возврат true, если узел является потомком узла.
contentEditable Установка или возврат того, является ли содержимое элемента редактируемым.
dir Установка или возврат значения属性的 dir элемента.
firstChild Возврат первого подэлемента элемента.
firstElementChild Возврат первого подэлемента элемента.
focus() Позволить элементу получить фокус.
getAttribute() Возврат значения атрибута элемента.
getAttributeNode() Возврат атрибутного узла.
getBoundingClientRect() Возврат размера элемента и его положения относительно окна просмотра.
getElementsByClassName() Возврат集合 подэлементов с заданным классом.
getElementsByTagName() Возврат集合 подэлементов с заданным именем тега.
hasAttribute() Возврат true, если элемент имеет заданный атрибут.
hasAttributes() Возврат true, если элемент имеет любые атрибуты.
hasChildNodes() Возврат true, если элемент имеет любые подэлементы.
element.id Установка или возврат значения属性的 id элемента.
innerHTML Установка или возврат содержимого элемента.
innerText Установка или возврат текстового содержимого узла и его потомков
insertAdjacentElement() Вставка нового HTML-элемента в позицию относительно элемента.
insertAdjacentHTML() Вставка текста в позицию относительно элемента в формате HTML.
insertAdjacentText() Вставка текста в позицию относительно элемента.
insertBefore() Вставка нового подэлемента перед существующим подэлементом.
isContentEditable Возврат true, если содержимое элемента редактируемо.
isDefaultNamespace() Возврат true, если заданный namespaceURI является значением по умолчанию.
isEqualNode() Проверка, равны ли два элемента.
isSameNode() Проверка, являются ли два элемента одним и тем же узлом.
isSupported() Устарел.
lang Установка или возврат значения属性的 lang элемента.
lastChild Возврат последнего подэлемента элемента.
lastElementChild Вернуть последний подэлемент элемента.
matches() Вернуть true, если элемент соответствует данному CSS-селектору.
namespaceURI Вернуть URI пространства имен элемента.
nextSibling Вернуть следующий узел, находящийся на том же уровне узловой строки.
nextElementSibling Вернуть следующий элемент, находящийся на том же уровне узловой строки.
nodeName Вернуть имя узла.
nodeType Вернуть тип узла.
nodeValue Установить или вернуть значение узла.
normalize() Объединить相邻 текстовые узлы в элементе и удалить пустые текстовые узлы.
offsetHeight Вернуть высоту элемента, включая внутренние отступы, рамки и полосы прокрутки.
offsetWidth Вернуть ширину элемента, включая внутренние отступы, рамки и полосы прокрутки.
offsetLeft Вернуть горизонтальное положение элемента.
offsetParent Вернуть контейнер, содержащий смещение элемента.
offsetTop Вернуть вертикальное положение элемента.
outerHTML Установить или вернуть содержимое элемента (включая начетаг и结束etag).
outerText Установить или вернуть внешнюю текстовую содержимое узла и его потомков.
ownerDocument Вернуть корневой элемент элемента (документ объекта).
parentNode Вернуть родительский узел элемента.
parentElement Вернуть родительский элемент узла.
previousSibling Вернуть предыдущий узел, находящийся на том же уровне узловой строки.
previousElementSibling Вернуть предыдущий элемент, находящийся на том же уровне узловой строки.
querySelector() Вернуть первый подэлемент, соответствующий CSS-селектору.
querySelectorAll() Вернуть все подэлементы, соответствующие CSS-селектору.
remove() Удалить элемент из DOM.
removeAttribute() Удалить атрибут из элемента.
removeAttributeNode() Удалить атрибут узла и вернуть удаленный узел.
removeChild() Удалить подузел из элемента.
removeEventListener() Удалить уже используемый обработчик событий, добавленный с помощью метода addEventListener().
replaceChild() Заменить подузел элемента.
scrollHeight Возврат полной высоты элемента, включая внутренние отступы.
scrollIntoView() Перемещение элемента в видимую область окна браузера
scrollLeft Установка или возврат количества пикселей горизонтального скролла содержимого элемента
scrollTop Установка или возврат количества пикселей вертикального скролла содержимого элемента
scrollWidth Возврат общей ширины элемента, включая отступы
setAttribute() Установка или изменение значения атрибута
setAttributeNode() Установка или изменение атрибута узла
style Установка или возврат значения атрибута style элемента
tabIndex Установка или возврат значения атрибута tabIndex элемента
tagName Возврат имени тега элемента
textContent Установка или возврат текстового содержимого узла и его потомков
title Установка или возврат значения атрибута title элемента
toString() Преобразование элемента в строку

Подробное описание интерфейса Element

Интерфейс Element представляет собой HTML-элемент, XML-элемент или тег. Атрибут tagName указывает имя элемента. Атрибут documentElement объекта Document ссылается на корневой объект Element данного документа. Атрибут body объекта HTMLDocument также аналогичен, он ссылается на элемент <body> документа. Чтобы найти элемент с указанным именем в HTML-документе, используется метод Document.getElementById() (и присваивается уникальное имя элементу через атрибут id). Чтобы определить элемент по тегу, используется метод getElementsByTagName(), который является как методом Element, так и Document. В HTML-документе также можно использовать аналогичный метод HTMLDocument.getElementsByName() для поиска элементов по атрибуту name. В конце концов, можно использовать метод Document.createElement() для создания нового элемента Element, который будет вставлен в документ.

Метод addEventListener() (и его специфический для IE заменитель attachEvent()) предоставляет способ регистрации функции обработчика событий для определенного типа событий на данном элементе. Технически, addEventListener(), removeEventListener() и dispatchEvent() определены интерфейсом EventTarget спецификации 2-го уровня DOM Events. Все объекты Element реализуют интерфейс EventTarget.

Другие методы этого интерфейса предоставляют доступ к атрибутам элемента. В документе HTML (и во многих документах XML) все атрибуты имеют простые строковые значения, и вы можете использовать простые методы getAttribute() и setAttribute() для выполнения любых операций с атрибутами.

Если вы используете документ XML, он может содержать ссылки на сущности в качестве части значения атрибута, вам нужно будет использовать объект Attr и его поддерево узлов. Вы можете использовать getAttributeNode() и setAttributeNode() для получения и установки объекта Attr, или можно итерировать по массиву attributes[] интерфейса Node, чтобы получить узлы Attr. Если вы используете документ XML с пространством имен, вам нужно использовать методы с именами, начинающимися с "NS".

В первой версии DOM规范 метод normalize() является частью интерфейса Element. Во второй версии normalize() является частью интерфейса Node. Все узлы Element наследуют этот метод и могут продолжать использовать его.

Знания: узлы HTML DOM

В HTML DOM (документовая модель объектов) каждая часть является узлом:

  • Документ сам по себе является узлом документа
  • Все элементы HTML - это узлы элементов
  • Все атрибуты HTML - это узлы атрибутов
  • Текст в элементах HTML - это узлы текста
  • Комментарии - это узлы комментариев

Объект Element

В HTML DOM объект Element представляет собой элемент HTML.

Объект Element может иметь подузлы типа узла элемента, узла текста, узла комментария.

Объект NodeList представляет собой список узлов, например, набор подузлов элементов HTML.

Элементы также могут иметь атрибуты. Атрибуты - это узлы атрибутов (см.下一节).