Oggetto Elemento HTML DOM

Oggetto Element

In HTML DOM, l'oggetto Element rappresenta un elemento HTML, come P, DIV, A, TABLE o qualsiasi altro elemento HTML.

Attributi e Metodi

I seguenti attributi e metodi sono disponibili per tutti gli elementi HTML:

Attributi / Metodi Descrizione
accessKey Imposta o restituisce l'attributo accesskey dell'elemento.
addEventListener() Aggiunge un gestore eventi all'elemento.
appendChild() Aggiunge un nuovo nodo figlio all'elemento.
attributes Restituisce il NamedNodeMap degli attributi dell'elemento.
blur() Rimuove il fuoco dall'elemento.
childElementCount Restituisce il numero di elementi figli dell'elemento.
childNodes Restituisce una NodeList di nodi figli dell'elemento.
children Restituisce una raccolta di elementi figli dell'elemento.
classList Restituisce il nome della classe dell'elemento.
className Imposta o restituisce il valore dell'attributo class dell'elemento.
click() Simula un clic del mouse sull'elemento.
clientHeight Restituisce l'altezza dell'elemento, inclusi i margini interni.
clientLeft Restituisce la larghezza del bordo sinistro dell'elemento.
clientTop Restituisce la larghezza del bordo superiore dell'elemento.
clientWidth Restituisce la larghezza dell'elemento, inclusi i margini interni.
cloneNode() Clona l'elemento.
closest() Cerca l'elemento più vicino nel albero DOM che corrisponde al selettore CSS.
compareDocumentPosition() Confronta la posizione del documento di due elementi.
contains() Restituisce true se il nodo è un discendente del nodo.
contentEditable Imposta o restituisce se il contenuto dell'elemento è modificabile.
dir Imposta o restituisce il valore dell'attributo dir dell'elemento.
firstChild Restituisce il primo figlio dell'elemento.
firstElementChild Restituisce il primo figlio elementare dell'elemento.
focus() Fornisce l'elemento con l'attenzione.
getAttribute() Restituisce il valore dell'attributo dell'elemento.
getAttributeNode() Restituisce il nodo dell'attributo.
getBoundingClientRect() Restituisce la dimensione dell'elemento e la sua posizione rispetto alla viewport.
getElementsByClassName() Restituisce l'insieme di figli con il nome della classe fornito.
getElementsByTagName() Restituisce l'insieme di figli con il nome del tag fornito.
hasAttribute() Restituisce true se l'elemento ha l'attributo fornito.
hasAttributes() Restituisce true se l'elemento ha qualsiasi attributo.
hasChildNodes() Restituisce true se l'elemento ha qualsiasi figlio.
element.id Imposta o restituisce il valore dell'attributo id dell'elemento.
innerHTML Imposta o restituisce il contenuto dell'elemento.
innerText Impostare o restituire il contenuto testuale del nodo e dei suoi discendenti.
insertAdjacentElement() Inserisce un nuovo elemento HTML in una posizione relativa all'elemento.
insertAdjacentHTML() Inserisce il testo HTML in una posizione relativa all'elemento.
insertAdjacentText() Inserisce il testo in una posizione relativa all'elemento.
insertBefore() Inserisce un nuovo figlio prima del figlio esistente.
isContentEditable Restituisce true se il contenuto dell'elemento è modificabile.
isDefaultNamespace() Restituisce true se il namespaceURI fornito è il valore predefinito.
isEqualNode() Verifica se due elementi sono uguali.
isSameNode() Verifica se due elementi sono la stessa nodo.
isSupported() Disabilitato.
lang Imposta o restituisce il valore dell'attributo lang dell'elemento.
lastChild Restituisce l'ultimo figlio dell'elemento.
lastElementChild Restituisce l'ultimo elemento figlio dell'elemento.
matches() Restituisce true se l'elemento corrisponde al selettore CSS fornito.
namespaceURI Restituisce l'URI dello spazio dei nomi dell'elemento.
nextSibling Restituisce il nodo successivo nello stesso livello del nodo.
nextElementSibling Restituisce l'elemento successivo nello stesso livello del nodo.
nodeName Restituisce il nome del nodo.
nodeType Restituisce il tipo di nodo del nodo.
nodeValue Imposta o restituisce il valore del nodo.
normalize() Unisce i nodi di testo adiacenti all'interno dell'elemento e rimuove i nodi di testo vuoti.
offsetHeight Restituisce l'altezza dell'elemento, inclusi i margini interni, i bordi e le barre di scorrimento.
offsetWidth Restituisce la larghezza dell'elemento, inclusi i margini interni, i bordi e le barre di scorrimento.
offsetLeft Restituisce la posizione orizzontale dell'elemento.
offsetParent Restituisce il contenitore di offset dell'elemento.
offsetTop Restituisce la posizione verticale dell'elemento.
outerHTML Imposta o restituisce il contenuto dell'elemento (inclusi i tag di inizio e fine).
outerText Imposta o restituisce il contenuto testuale esterno del nodo e dei suoi discendenti.
ownerDocument Restituisce l'elemento radice (oggetto documento).
parentNode Restituisce il nodo genitore dell'elemento.
parentElement Restituisce il nodo genitore dell'elemento.
previousSibling Restituisce il nodo precedente nello stesso livello del nodo.
previousElementSibling Restituisce l'elemento precedente nello stesso livello del nodo.
querySelector() Restituisce il primo elemento figlio che corrisponde al selettore CSS.
querySelectorAll() Restituisce tutti gli elementi figli che corrispondono al selettore CSS.
remove() Rimuove l'elemento dal DOM.
removeAttribute() Rimuove l'attributo dall'elemento.
removeAttributeNode() Rimuove il nodo attributo e restituisce il nodo rimosso.
removeChild() Rimuove il nodo figlio dall'elemento.
removeEventListener() Elimina il gestore degli eventi aggiunto con la metodo addEventListener().
replaceChild() Sostituisce i nodi figli dell'elemento.
scrollHeight Restituisce l'altezza totale dell'elemento, inclusi i margini interni.
scrollIntoView() Portare l'elemento nella visibilità della finestra del browser.
scrollLeft Impostare o restituire il numero di pixel di scorrimento orizzontale del contenuto dell'elemento.
scrollTop Impostare o restituire il numero di pixel di scorrimento verticale del contenuto dell'elemento.
scrollWidth Restituire la larghezza complessiva dell'elemento, inclusi i margini interni.
setAttribute() Impostare o modificare il valore dell'attributo.
setAttributeNode() Impostare o modificare il nodo dell'attributo.
style Impostare o restituire il valore dell'attributo style dell'elemento.
tabIndex Impostare o restituire il valore dell'attributo tabIndex dell'elemento.
tagName Restituire il nome del tag dell'elemento.
textContent Impostare o restituire il contenuto testuale del nodo e dei suoi discendenti.
title Impostare o restituire il valore dell'attributo title dell'elemento.
toString() Convertire l'elemento in una stringa.

Dettagli dell'interfaccia Element

L'interfaccia Element rappresenta un elemento HTML, un elemento XML o un tag. L'attributo tagName specifica il nome dell'elemento. L'attributo documentElement del Document si riferisce all'oggetto Element radice di questo documento. L'attributo body dell'oggetto HTMLDocument è simile, si riferisce all'elemento <body> del documento. Per trovare un elemento con un nome specifico in un documento HTML, utilizzare Document.getElementById() (e dare all'elemento un nome unico tramite l'attributo id). Per localizzare un elemento tramite il nome del tag, utilizzare getElementsByTagName(), che è sia un metodo di Element che di Document. In un documento HTML, è possibile utilizzare anche il metodo HTMLDocument.getElementsByName() per trovare elementi in base all'attributo name. Infine, è possibile creare un nuovo elemento Element da inserire nel documento utilizzando il metodo Document.createElement().

Il metodo addEventListener() (e il suo metodo alternativo specifico per IE, attachEvent()) fornisce un modo per registrare una funzione di gestione degli eventi per un tipo specifico di evento su un elemento. Tecnicamente, addEventListener(), removeEventListener() e dispatchEvent() sono definiti dall'interfaccia EventTarget della specifica di livello 2 DOM Events. Tutti gli oggetti Element implementano EventTarget.

Le altre vari metodi di questo'interfaccia forniscono l'accesso agli attributi dell'elemento. Nei documenti HTML (e in molti documenti XML), tutti gli attributi hanno valori stringa semplici e puoi utilizzare i metodi semplici getAttribute() e setAttribute() per eseguire qualsiasi operazione sugli attributi necessaria.

Se stai utilizzando un documento XML, potrebbe contenere riferimenti alle Entity come parte del valore dell'attributo; dovrai utilizzare l'oggetto Attr e il suo albero di nodi. Puoi ottenere e impostare l'oggetto Attr utilizzando getAttributeNode() e setAttributeNode(), o puoi esplorare i nodi Attr dell'array attributes[] dell'interfaccia Node. Se utilizzi un documento XML con namespace di nome, dovrai utilizzare i vari metodi con nome che inizia con "NS".

Nel livello 1 della specifica DOM, il metodo normalize() fa parte dell'interfaccia Element. Nel livello 2 della specifica, normalize() è parte dell'interfaccia Node. Tutti i nodi Element derivano questo metodo e possono utilizzarlo ancora.

Conoscenza: Nodi HTML DOM

In HTML DOM (Document Object Model), ogni parte è un nodo:

  • Il documento stesso è un nodo documento
  • Tutti gli elementi HTML sono nodi elemento
  • Tutti gli attributi HTML sono nodi attributo
  • Il testo all'interno degli elementi HTML è rappresentato da nodi testo
  • I commenti sono nodi commento

Oggetto Element

In HTML DOM, l'oggetto Element rappresenta l'elemento HTML.

L'oggetto Element può avere figli di tipo nodo elemento, nodo testo, nodo commento.

L'oggetto NodeList rappresenta una lista di nodi, ad esempio l'insieme dei figli degli elementi HTML.

Gli elementi possono anche avere attributi. Gli attributi sono nodi attributo (vedi il prossimo capitolo).