L'oggetto document contiene tutti gli elementi della pagina e pertanto va considerato facente parte di tale oggetto anche l'elemento (tag) html.
Tramite i metodi di questo oggetto è possibile accedere agli elementi di una pagina e/o crearne di nuovi.
I metodi per accedere agli elementi di una pagina sono:
Il metodo getElementById() restituisce un riferimento all'elemento recuperato tramite il suo id univoco. Nell'esempio di mostrato di seguito viene recuperato un riferimento all'elemento con contenitore.
<html>
<head>
<title>
DOM esempio
</title>
</head>
<body>
<div id="contenitore">
Questo è un contenitore
<div id="blocco">
Questo è un altro contenitore
</div>
</div>
</body>
</html>
<script>
elemento = document.getElementById("contenitore")
</script>Il metodo getElementsByTagName() recupera una famiglia di elementi caratterizzata dallo stesso tag e la organizza in un array ordinato in base alla loro posizione nel documento. Nell'esempio mostrato di seguito vengono recuperati tutti i tag div del documento, scorrevoli poi tramite il metodo lista_elementi.item(i) dove i sta per l'indice della posizione dell'elemento nel documento.
Da notare la presenza della lettera s alla parola Element(s) per questo secondo metodo che indica appunto, a differenza del primo, che vengono recuperati più di un riferimento in caso ce ne siano (da sottolineare che anche nel caso in cui ci sia un solo elemento recuperato con questo secondo metodo esso verrà ugualmente organizzato in un array, dove inevitabilmente il suo indice sarà 0).
<html>
<head>
<title>
DOM esempio
</title>
</head>
<body>
<div id="contenitore">
Questo è un contenitore
<div id="blocco">
Questo è un altro contenitore
</div>
</div>
</body>
</html>
<script>
lista_elementi = document.getElementsByTagName("div")
</script>Giusto per informazione esiste anche un altro metodo ovvero, getElementsByName(), che utilizza l'attributo name dei tag, ma essendo un metodo deprecato non verrà preso in considerazione.
I metodi per creare nuovi elementi sono invece:
Il metodo createElement() che crea un nuovo elemento in base al tag passato come parametro.
nuovo_elemento = document.createElement("div")Il metodo createTextNode() che crea un nodo di tipo testo (e che come abbiamo già detto non potrà contenere altri nodi) in base al testo passato come parametro.
nuovo_nodo_di_testo = document.createTextNode("Questo è un nuovo nodo di testo")Chiamando questi metodi il nodo verrà creato in memoria (del browser) ritornando nella variabile un riferimento all'elemento creato e verrà visualizzato solo se opportunamente indicato da un opportuno metodo per la visualizzazione.
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
Scrivi un Commento