MICHELEPISANI.IT

Guida al DOM

L'oggetto che contiene tutti gli elementi di una pagina web

L'oggetto document

Agosto 04
07:222014

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.

 

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Umberto

Grazie Michele, in realtà faccio un po' fatica a districarmi con l'assistenza di FB... Ora provo e …

Michele Pisani

Ciao Umberto,
hai provato a contattare il supporto tramite la community?

Umberto

Salve, dopo un paio di mesi di tentativi e di modifiche, sono riuscito a far partire la procedura …

Rosa

Salve. Sto unendo due Pagine. Tutto è stato da me 'omogeneizzato', quindi coi nomi simili ci siamo …