Come abbiamo accennato "document" è molto importante, perché è l'elemento che contiene tutti gli altri elementi del DOM.
Di conseguenza, anche "document" corrisponde ad un tag, quello che contiene tutti gli altri e che identifica una pagina per il Web: il tag <html> (tecnicamente parlando corrisponde a tutto il codice della pagina, anche esterno al tag <html>, come ad esempio la definizione del DOCTYPE).
Per chi già ha scritto pagine DHTML, risulta un elemento molto familiare, presente già dalle prime versioni di Netscape e JavaScript (che poi costituiscono le specifiche per il DOM di livello 0) e presente in tutti gli altri browsers, il che è la prima conferma di quello che si era accennato in precedenza, ovvero che i browsers spesso usano un loro DOM, misto tra quello raccomandato dal W3C ed uno proprio (a volte prendendo "spunto" da altri browser).
Fatta questa premessa, esaminiamo i principali metodi di document, che si possono dividere tra:
- metodi che si occupano di recuperare elementi nella pagina
- metodi che sono coinvolti nella creazione di nuovi elementi
Recuperare gli elementi
A supporto di questa necessità il DOM fornisce 2 metodi:
-
getElementById()
Questo metodo (come si può intuire dal nome) permette di recuperare l'elemento caratterizzato univocamente dal valore del proprio attributo ID. In particolare restituisce un riferimento all'elemento in questione. La sintassi è:
document.getElementById(ID_elemento)
- ID_elemento è, per l'appunto, il valore (univoco) dell'attributo ID dell'elemento che si vuole recuperare.
-
getElementsByTagName()
Questo metodo permette di recuperare l'insieme degli elementi caratterizzati dallo stesso tag. In particolare ritorna un array di tutti gli elementi del tag considerato, nell'ordine in cui compaiono nel codice della pagina. La sintassi è:
document.getElementsByTagName(nome_TAG)
- nome_TAG è il nome del Tag di cui si vuole recuperare la lista.
Soffermiamoci sul fatto che quest'ultimo metodo ritorna un array. L'array può essere scandito con la consueta sintassi, ovvero usando le parentesi quadre: array[indice].
Il W3C utilizza un metodo per scorrere le liste dei nodi per così dire "più esplicito": array.item(indice). Questa stessa sintassi si può applicare a tutti gli array di nodi che incontreremo. In effetti applichiamo sempre questa.
Le differenze tra i due metodi sono evidenti e manifestano la complementarietà dei loro obiettivi, ovvero recuperare o un elemento particolare o una famiglia di elementi con le stesse caratteristiche. Ne esamineremo meglio il funzionamento più avanti nella guida.
Nota: I nomi usati dal W3C per i sono espliciti e descrittivi delle funzioni che rappresentano. Questo vale per tutti i metodi e le proprietà. Questa filosofia è perseguita dichiaratamente dal W3C, allo scopo non solo di semplificare la leggibilità e l'usabilità dei vari oggetti, ma anche al fine di evitare possibili conflitti tra i nomi dettati dalle specifiche e quelli proprietari dei vari browser.
Creare nodi ed elementi
Passiamo ora ai metodi di document che si occupano di creare nuovi elementi della pagina:
- createElement()
Il metodo permette di creare un nuovo elemento di qualunque tipo. Ritorna un riferimento al nuovo elemento creato. La sintassi è:
nuovo_elemento = document.createElement(nome_TAG)
- nuovo_elemento è la variabile che conterrà il riferimento al nuovo elemento creato
- nome_TAG è il nome del Tag di cui si vuole creare un nuovo elemento
-
createTextNode()
Il metodo permette di creare un nuovo nodo di testo. Come accennato, i testi sono nodi particolari, che non possono contenere altri nodi, né possono avere attributi, corrispondono quindi all'ultimo anello della catena del DOM. In particolare, questo metodo, restituisce un riferimento al nuovo nodo di testo creato. La sintassi è:
nuovo_testo = document.createTextNode(testo_da_inserire)
- nuovo_testo è la variabile che conterrà il riferimento al nuovo nodo di testo
- testo_da_inserire è la stringa di testo da inserire nel nuovo nodo
Proviamo ad utilizzare questi metodi. Supponiamo di voler inserire un nuovo nodo di testo, il codice da utilizzare sarà:
testo = document.createElement("Questo testo lo aggiungo dinamicamente")
Ma dove è il nuovo nodo di testo? In realtà il nodo non viene visualizzato, almeno per il momento. Questo può farci intuire che c'è differenza tra creare un nuovo nodo ed inserirlo nella pagina. Esiste infatti un set di metodi che serve per sistemare i nuovi nodi esattamente dove desideriamo.