HTML DOM ЭлементОбъект
Узлы HTML DOM
В HTML DOM (Document Object Model), всё являетсяузлом:
- Сам документ является объектом document
- Все элементы HTML являются узлами элементов
- Все атрибуты HTML являются узлами атрибутов
- Текст, вставленный в элементы HTML, является текстовыми узлами
- Комментарии являются узлами комментариев
Объект Element
В HTML DOM,объект элементапредставляет HTML-элемент.
У объекта элементадочерние узлымогут быть узлами элементов, текстовыми узлами или узлами комментариев.
Объект NodeListПредставляет список узлов, аналогичный коллекции дочерних узлов HTML-элемента.
Элементы могут иметь атрибуты. Атрибуты принадлежат узлам атрибутов (см. следующую главу).
Поддержка браузеров
Все основные браузеры поддерживают объект Element и объект NodeList.
Свойства и методы
Приведённые выше свойства и методы применяются ко всем HTML-элементам:
| Свойство / Метод | Описание |
|---|---|
| element.accessKey | Задаёт или возвращает accesskey элемента |
| element.addEventListener() | Добавляет обработчик события указанному элементу |
| element.appendChild() | Добавляет новый дочерний элемент к элементу |
| element.attributes | Возвращает массив атрибутов элемента |
| element.childNodes | Возвращает массив дочерних элементов элемента |
| element.children | Возвращает коллекцию дочерних элементов элемента |
| element.classList | Возвращает имя класса элемента как объект DOMTokenList |
| element.className | Устанавливает или возвращает атрибут class элемента |
| element.clientTop | Представляет ширину верхней границы элемента в пикселях |
| element.clientLeft | Представляет ширину левой границы элемента в пикселях |
| element.clientHeight | Возвращает видимую высоту содержимого на странице (высота включает внутренние отступы, но не границы, внешние отступы или полосы прокрутки) |
| element.clientWidth | Возвращает видимую ширину содержимого на странице (ширина включает внутренние отступы, но не границы, внешние отступы или полосы прокрутки) |
| element.cloneNode() | Клонирует элемент |
| element.compareDocumentPosition() | Сравнивает позицию в документе двух элементов |
| element.contentEditable | Задаёт или возвращает, является ли содержимое элемента редактируемым |
| element.dir | Задаёт или возвращает направление текста элемента |
| element.firstElementChild | Возвращает первый дочерний элемент элемента |
| element.firstChild | Возвращает первый дочерний узел элемента |
| element.focus() | Устанавливает фокус на документ или элемент |
| element.getAttribute() | Возвращает значение атрибута указанного элемента |
| element.getAttributeNode() | Возвращает указанный узел атрибута |
| element.getElementsByTagName() | Возвращает коллекцию всех дочерних элементов с указанным именем тега |
| element. getElementsByClassName() | Возвращает коллекцию всех элементов с указанным именем класса в документе в виде объекта NodeList |
| element.getFeature() | Возвращает объект, реализующий API для указанной возможности |
| element.getUserData() | Возвращает объект пар ключ-значение, связанный с элементом |
| element.hasAttribute() | Возвращает true, если указанный атрибут существует в элементе, иначе возвращает false |
| element.hasAttributes() | Возвращает true, если у элемента есть какие-либо атрибуты, иначе возвращает false |
| element.hasChildNodes() | Возвращает, есть ли у элемента дочерние элементы |
| element.hasFocus() | Возвращает логическое значение, определяющее, находится ли документ или элемент в фокусе |
| element.id | Устанавливает или возвращает id элемента |
| element.innerHTML | Устанавливает или возвращает содержимое элемента |
| element.insertBefore() | Вставляет новый дочерний элемент перед существующим дочерним элементом |
| element.isContentEditable | Возвращает true, если содержимое элемента доступно для редактирования, в противном случае возвращает false |
| element.isDefaultNamespace() | Возвращает true, если namespaceURI указан, в противном случае возвращает false |
| element.isEqualNode() | Проверяет, равны ли два элемента |
| element.isSameNode() | Проверяет, имеют ли два элемента один и тот же узел |
| element.isSupported() | Возвращает true, если указанная возможность поддерживается в элементе |
| element.lang | Задаёт или возвращает язык элемента |
| element.lastChild | Возвращает последний дочерний узел |
| element.lastElementChild | Возвращает последний дочерний элемент указанного элемента |
| element.matches() | Если элемент соответствует указанному CSS-селектору, метод matches() возвращает true, в противном случае false |
| element.namespaceURI | Возвращает URI пространства имён |
| element.nextSibling | Возвращает узел, непосредственно следующий за элементом |
| element.nextElementSibling | Возвращает следующий сестринский элемент указанного элемента (следующий элементный узел на том же уровне дерева узлов) |
| element.nodeName | Возвращает имя тега элемента (в верхнем регистре) |
| element.nodeType | Возвращает тип узла элемента |
| element.nodeValue | Возвращает значение узла элемента |
| element.normalize() | Приводит элемент к «нормальной» форме, в которой только структура (такая как элементы, комментарии, инструкции обработки, секции CDATA и ссылки на сущности) разделяет текстовые узлы, т.е. все текстовые узлы под элементом (включая атрибуты) не имеют ни смежных текстовых узлов, ни пустых текстовых узлов |
| element.offsetHeight | Возвращает высоту любого элемента, включая границу и внутренние отступы, но не внешние отступы |
| element.offsetWidth | Возвращает ширину элемента, включая границу и внутренние отступы, но не внешние отступы |
| element.offsetLeft | Возвращает контейнер смещения относительной позиции горизонтального смещения текущего элемента |
| element.offsetParent | Возвращает контейнер смещения элемента |
| element.offsetTop | Возвращает контейнер смещения относительной позиции вертикального смещения текущего элемента |
| element.ownerDocument | Возвращает корневой элемент (объект document) элемента |
| element.parentNode | Возвращает родительский узел элемента |
| element.previousSibling | Возвращает элемент, непосредственно предшествующий данному элементу |
| element.previousElementSibling | Возвращает предыдущий соседний элемент указанного элемента (предыдущий узел-элемент на том же уровне дерева узлов) |
| element.querySelector() | Возвращает первый дочерний элемент, соответствующий указанному CSS-селектору |
| document.querySelectorAll() | Возвращает список узлов всех дочерних элементов, соответствующих указанному CSS-селектору |
| element.removeAttribute() | Удаляет указанный атрибут у элемента |
| element.removeAttributeNode() | Удаляет указанный узел атрибута и возвращает удалённый узел |
| element.removeChild() | Удаляет дочерний элемент |
| element.removeEventListener() | Удаляет обработчик событий, добавленный методом addEventListener() |
| element.replaceChild() | Заменяет дочерний элемент |
| element.scrollHeight | Возвращает высоту всего элемента (включая части, скрытые полосами прокрутки) |
| element.scrollLeft | Возвращает расстояние между левым краем фактического элемента и левым краем текущей области просмотра |
| element.scrollTop | Возвращает расстояние между верхним краем фактического элемента и верхним краем текущей области просмотра |
| element.scrollWidth | Возвращает ширину всего элемента (включая части, скрытые полосами прокрутки) |
| element.setAttribute() | Задает или изменяет указанный атрибут и задает его значение |
| element.setAttributeNode() | Задает или изменяет указанный узел атрибута |
| element.setIdAttribute() | |
| element.setIdAttributeNode() | |
| element.setUserData() | Связывает объект с указанной парой ключ-значение в элементе |
| element.style | Задает или возвращает атрибут style элемента |
| element.tabIndex | Задает или возвращает порядок табуляции элемента |
| element.tagName | Возвращает имя тега элемента в виде строки (в верхнем регистре) |
| element.textContent | Устанавливает или возвращает узел и его текстовое содержимое |
| element.title | Устанавливает или возвращает атрибут title элемента |
| element.toString() | Преобразует элемент в строку |
| nodelist.item() | Возвращает индекс элемента в дереве документа |
| nodelist.length | Возвращает количество узлов в списке узлов |