Oltre a fornire un modo per rappresentare mediante oggetti il documento corrente, il DOM consente di manipolare questi oggetti tramite JavaScript.
Selezionare elementi
Possiamo ad esempio accedere agli elementi della pagina utilizzando diversi criteri di selezione.
Se nella pagina corrente abbiamo un elemento con un certo valore per l'attributo id, come quello del seguente esempio:
<p id="mioParagrafo">Questo è un paragrafo</p>possiamo utilizzare il metodo getElementById() dell'oggetto document come mostrato dal seguente codice:
var p = document.getElementById("mioParagrafo");Questo metodo, uno dei più utilizzati per la gestione del DOM, restituisce un oggetto che rappresenta il nodo di tipo elemento che ha l'attributo id con il valore specificato. Se l'elemento non esiste viene restituito il valore null, mentre se esistono più elementi con lo stesso id viene restituito il primo individuato.
Analogo a getElementById() è il metodo getElementsByName(), che restituisce l'elenco dei nodi della pagina il cui valore dell'attributo name corrisponde a quello del parametro.
A differenza del primo, però, questo metodo restituisce un elenco di oggetti, ovvero, più precisamente, un NodeList, cioè una struttura dati simile ad un array contenente nodi del DOM.
È anche possibile individuare gli elementi di una pagina in base al loro tag utilizzando il metodo getElementsByTagName(), come nel seguente esempio:
var listaParagrafi = document.getElementByTagName("p");In questo caso il metodo restituisce sotto forma di NodeList l'elenco dei nodi corrispondenti al tag specificato come parametro. Specificando come parametro la stringa "*", getElementsByTagName() restituisce l'elenco di tutti i nodi della pagina.
Se utilizziamo il metodo getElementByClassName() possiamo ottenere l'elenco dei nodi a cui è stato assegnato un determinato valore come attributo class.
querySelector
Tra le novità più introdotte più di recente nelle specifiche del DOM c'è la possibilità di selezionare gli elementi di una pagina utilizzando i selettori CSS. Due sono i metodi che consentono questo approccio: querySelector() e querySelectorAll(). L'uno restituisce il primo elemento trovato, l'altro l'elenco di tutti gli elementi individuati dal selettore. Ad esempio, il seguente codice restituisce l'elenco dei <div> di classe messaggio:
var divList = document.querySelectorAll("div.messaggio");Il seguente esempio, invece, seleziona l'elemento con id mioParagrafo, risultando quindi alternativo a getElementById():
var p = document.querySelector("#mioParagrafo");