DOM Recupero di elementi html esistenti


Esempio

Una delle attività più comuni è il recupero di un elemento esistente dal DOM da manipolare. Più comunemente questi metodi sono eseguiti su document , perché è il nodo radice, ma tutti questi metodi funzionano su qualsiasi elemento HTML nella struttura. Restituiranno solo i bambini dal nodo su cui è eseguito.

Recupera per id

var element = document.getElementById("logo");

element conterrà l' element (solo) che ha l'attributo id impostato su "logo" o contiene null se non esiste alcun elemento di questo tipo. Se esistono più elementi con questo ID, il documento non è valido e può succedere di tutto.

Recupera per nome del tag

var elements = document.getElementsByTagName("a");

elements conterranno un live HTMLCollection (un oggetto array-like) di tutti i tag collegamento nel documento. Questa raccolta è sincronizzata con il DOM, quindi tutte le modifiche apportate al DOM si riflettono in questa raccolta. La collezione fornisce accesso casuale e ha una lunghezza.

var element = elements[0];
//Alternative
element = elements.item(0);

element contiene il primo elemento di collegamento HTML incontrato o null se l'indice è fuori limite

var length = elements.length;

length è uguale al numero di elementi di collegamento HTML attualmente presenti nell'elenco. Questo numero può cambiare quando viene modificato il DOM.

Recupera per classe

var elements = document.getElementsByClassName("recipe");

elements conterranno un live HTMLCollection (un oggetto array-like) di tutti gli elementi in cui la loro class attributo comprende "ricetta". Questa raccolta è sincronizzata con il DOM, quindi tutte le modifiche apportate al DOM si riflettono in questa raccolta. La collezione fornisce accesso casuale e ha una lunghezza.

var element = elements[0];
//Alternative
element = elements.item(0);

element contiene il primo elemento HTML incontrato con questa classe. Se non ci sono tali elementi, l' element ha il valore undefined nel primo esempio e null nel secondo esempio.

var length = elements.length;

length è uguale al numero di elementi HTML che attualmente hanno la "ricetta" di classe. Questo numero può cambiare quando viene modificato il DOM.

Recupera per nome

var elements = document.getElementsByName("zipcode");

elements conterranno un live NodeList (un oggetto array-like) di tutti gli elementi con il loro name attributo impostato su "codice postale". Questa raccolta è sincronizzata con il DOM, quindi tutte le modifiche apportate al DOM si riflettono in questa raccolta. La collezione fornisce accesso casuale e ha una lunghezza.

var element = elements[0];
//Alternative
element = elements.item(0);

element contiene il primo elemento HTML incontrato con questo nome.

var length = elements.length;

length è uguale al numero di elementi HTML che attualmente hanno "zipcode" come loro attributo name. Questo numero può cambiare quando viene modificato il DOM.