Obiekt Element HTML DOM

Obiekt Element

W HTML DOM, obiekt Element reprezentuje element HTML, takie jak P, DIV, A, TABLE lub każdy inny element HTML.

Atrybuty i metody

Poniższe atrybuty i metody są dostępne dla wszystkich elementów HTML:

Atrybuty / Metody Opis
accessKey Ustaw lub zwróć wartość atrybutu accesskey elementu.
addEventListener() Dołącz handler eventowy do elementu.
appendChild() Dodaj (dołącz) nowy węzeł dziecka do elementu.
attributes Zwróć NamedNodeMap atrybutów elementu.
blur() Usuwaj skupienie z elementu.
childElementCount Zwróć liczbę dzieci elementu.
childNodes Zwróć NodeList dziecka elementu.
children Zwróć kolekcję HTML elementów będących dziećmi elementu.
classList Zwróć nazwę klasy elementu.
className Ustaw lub zwróć wartość atrybutu class elementu.
click() Symuluj kliknięcie myszą na element.
clientHeight Zwróć wysokość elementu, w tym wewnętrzne marginesy.
clientLeft Zwróć szerokość lewej ramki elementu.
clientTop Zwróć szerokość górnej ramki elementu.
clientWidth Zwróć szerokość elementu, w tym wewnętrzne marginesy.
cloneNode() Klonuj element.
closest() Szukaj najbliższego elementu w drzewie DOM, który pasuje do wybornika CSS.
compareDocumentPosition() Porównuje pozycje dokumentów dwóch elementów.
contains() Zwraca true, jeśli węzeł jest potomkiem węzła.
contentEditable Ustawia lub zwraca, czy zawartość elementu jest edytowalna.
dir Ustawia lub zwraca wartość atrybutu dir elementu.
firstChild Zwraca pierwszy węzeł dziecka elementu.
firstElementChild Zwraca pierwszy element dziecka elementu.
focus() Pozwala elementowi uzyskać fokus.
getAttribute() Zwraca wartość atrybutu elementu.
getAttributeNode() Zwraca węzeł atrybutu.
getBoundingClientRect() Zwraca rozmiar elementu oraz jego pozycję względem viewport.
getElementsByClassName() Zwraca zbiór dziecka o podanej nazwie klasy.
getElementsByTagName() Zwraca zbiór dziecka o podanej nazwie etykiety.
hasAttribute() Zwraca true, jeśli element ma podany atrybut.
hasAttributes() Zwraca true, jeśli element ma jakieś atrybuty.
hasChildNodes() Zwraca true, jeśli element ma jakieś dziecko.
element.id Ustawia lub zwraca wartość atrybutu id elementu.
innerHTML Ustawia lub zwraca zawartość elementu.
innerText Ustawienie lub zwrócenie treści tekstowej węzła oraz jego potomków.
insertAdjacentElement() Wstawia nowy element HTML w stosunku do pozycji elementu.
insertAdjacentHTML() Wstawia tekst w formacie HTML w stosunku do pozycji elementu.
insertAdjacentText() Wstawia tekst w stosunku do pozycji elementu.
insertBefore() Wstawia nowy węzeł przed istniejącym dzieckiem.
isContentEditable Zwraca true, jeśli zawartość elementu jest edytowalna.
isDefaultNamespace() Zwraca true, jeśli podany namespaceURI jest wartością domyślną.
isEqualNode() Sprawdza, czy dwa elementy są równe.
isSameNode() Sprawdza, czy dwa elementy są tym samym węzłem.
isSupported() Przestarzałe.
lang Ustawia lub zwraca wartość atrybutu lang elementu.
lastChild Zwraca ostatnie dziecko elementu.
lastElementChild Zwraca ostatniego potomnego elementu.
matches() Zwraca true, jeśli element pasuje do podanego CSS selectora.
namespaceURI Zwraca URI przestrzeni nazw elementu.
nextSibling Zwraca następny węzeł na tym samym poziomie drzewa węzłów.
nextElementSibling Zwraca następny element na tym samym poziomie drzewa węzłów.
nodeName Zwraca nazwę węzła.
nodeType Zwraca typ węzła.
nodeValue Ustawia lub zwraca wartość węzła.
normalize() Złącza sąsiednie węzły tekstowe w elementach i usuwa puste węzły tekstowe.
offsetHeight Zwraca wysokość elementu, w tym wewnętrzne marginesy, ramki i paski przewijania.
offsetWidth Zwraca szerokość elementu, w tym wewnętrzne marginesy, ramki i paski przewijania.
offsetLeft Zwraca poziomą pozycję offset elementu.
offsetParent Zwraca kontener offset elementu.
offsetTop Zwraca pionową pozycję offset elementu.
outerHTML Ustawia lub zwraca zawartość elementu (w tym znaczniki startowe i końcowe).
outerText Ustawia lub zwraca zewnętrzną treść węzła oraz jego potomków.
ownerDocument Zwraca korzeń elementu (obiekt dokumentu).
parentNode Zwraca nadrzędny węzeł elementu.
parentElement Zwraca węzeł nadrzędny elementu.
previousSibling Zwraca poprzedni węzeł na tym samym poziomie drzewa węzłów.
previousElementSibling Zwraca poprzedni element na tym samym poziomie drzewa węzłów.
querySelector() Zwraca pierwszy potomny element, który pasuje do CSS selectora.
querySelectorAll() Zwraca wszystkie potomne elementy, które pasują do CSS selectora.
remove() Usuwa element z DOM.
removeAttribute() Usuwa atrybut z elementu.
removeAttributeNode() Usuwa węzeł atrybutu i zwraca usunięty węzeł.
removeChild() Usuwa węzły potomne z elementu.
removeEventListener() Usuwa zdarzenie obsługijące, które zostało dodane za pomocą metody addEventListener().
replaceChild() Zastępuje węzły potomne elementu.
scrollHeight Zwraca całą wysokość elementu, w tym wewnętrzne marginesy.
scrollIntoView() Przesunięcie elementu do widocznej części okna przeglądarki.
scrollLeft Ustawienie lub zwrócenie liczby poziomego przewijania zawartości elementu.
scrollTop Ustawienie lub zwrócenie liczby pikseli wertykalnego przewijania zawartości elementu.
scrollWidth Zwrócenie całkowitej szerokości elementu, w tym wewnętrznych marginesów.
setAttribute() Ustawienie lub zmiana wartości atrybutu.
setAttributeNode() Ustawienie lub zmiana węzła atrybutu.
style Ustawienie lub zwrócenie wartości atrybutu style elementu.
tabIndex Ustawienie lub zwrócenie wartości atrybutu tabIndex elementu.
tagName Zwrócenie nazwy znacznika elementu.
textContent Ustawienie lub zwrócenie treści tekstowej węzła oraz jego potomków.
title Ustawienie lub zwrócenie wartości atrybutu title elementu.
toString() Konwersja elementu na ciąg znaków.

Szczegółowe wyjaśnienie interfejsu Element

Interfejs Element reprezentuje element HTML, XML lub znacznik. Atrybut tagName określa nazwę elementu. Atrybut documentElement dokumentu odnosi się do korzenia elementu dokumentu. Atrybut body obiektu HTMLDocument jest podobny, odnosi się do elementu <body> dokumentu. Aby znaleźć w dokumencie HTML element o określonej nazwie, używa się Document.getElementById() (i przypisuje elementowi unikalną nazwę za pomocą atrybutu id). Aby zlokalizować element na podstawie nazwy znacznika, używa się getElementsByTagName(), co jest zarówno metodą Element, jak i Document. W dokumencie HTML można również użyć podobnej metody HTMLDocument.getElementsByName() do wyszukiwania elementów na podstawie atrybutu name. Ostatecznie, można użyć metody Document.createElement() do utworzenia nowego elementu Element do wstawienia do dokumentu.

Metoda addEventListener() (i jej specyficzny dla IE zamiennik attachEvent()) umożliwia rejestrację funkcji obsługi zdarzeń dla określonego typu na elemencie. Technicznie rzecz biorąc, addEventListener(), removeEventListener() i dispatchEvent() są zdefiniowane przez interfejs EventTarget specyfikacji DOM Events drugiej klasy. Wszystkie obiekty Element implementują EventTarget. Wszystkie Elementy są obiektami, które implementują EventTarget.

Różne inne metody tego interfejsu umożliwiają dostęp do atrybutów elementu. W dokumencie HTML (i wielu dokumentach XML), wszystkie atrybuty mają proste wartości ciągowe, i możesz użyć prostych metod getAttribute() i setAttribute() do wykonywania wymaganych operacji na atrybutach.

Jeśli używasz dokumentu XML, może on zawierać odwołania do Entyt jako część wartości atrybutu, będziesz musiał użyć obiektu Attr oraz poddrzewa jego węzłów. Możesz użyć getAttributeNode() i setAttributeNode() do uzyskania i ustawienia obiektu Attr, lub można przechodzić przez tablicę attributes[] interfejsu Node, aby uzyskać węzły Attr. Jeśli używasz dokumentu XML z przestrzenią nazw, musisz użyć metod o nazwach zaczynających się od "NS".

W specyfikacji 1 poziomu DOM, metoda normalize() jest częścią interfejsu Element. W specyfikacji 2 poziomu, normalize() jest częścią interfejsu Node. Wszystkie węzły Element dziedziczą tę metodę i mogą ją nadal używać.

Wiedza: Węzły HTML DOM

W HTML DOM (model obiektowy dokumentu) każda część jest węzłem:

  • Dokument sam w sobie jest węzłem dokumentu
  • Wszystkie elementy HTML są węzłami elementowymi
  • Wszystkie atrybuty HTML są węzłami atrybutowymi
  • Tekst wewnątrz elementu HTML jest węzłem tekstowym
  • Komentarze są węzłami komentarza

Obiekt Element

W HTML DOM, obiekt Element reprezentuje element HTML.

Obiekt Element może mieć podwęzły o typie węzła elementowego, węzła tekstowego, węzła komentarza.

Obiekt NodeList reprezentuje listę węzłów, np. zbiór podwęzłów elementów HTML.

Elementy mogą również mieć atrybuty. Atrybuty są węzłami atrybutowymi (patrz następny rozdział).