Sommario
Nella prima parte di questo tutorial abbiamo visto come è strutturato e come funziona il DOM, in questo continueremo a lavorarci per estenderne le funzionalità ed essere in grado di manipolare tutti gli elementi del nostro documento HTML.Lavorare con il DOM
Per accedere all'oggetto documento usiamo una variabile documento globale; Questa variabile è uno degli oggetti chiave che il browser crea per noi, poiché è attraverso questo oggetto documento che possiamo accedere alle informazioni del documento nel suo insieme e ci dà accesso individuale a ciascun oggetto documento.
Vediamo come sempre un esempio con cui possiamo conciliare la teoria che conosciamo con il modo in cui viene applicata nella realtà.
EsempioCi sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.
Uno degli aspetti più interessanti della frutta è la varietà disponibile in ogni paese. Vivo vicino a Londra, in una zona nota per le sue mele.
Il codice con cui usiamo il SOLE È abbastanza breve e semplice, tuttavia cattura i diversi usi che possiamo dargli, spiegheremo il codice parte per parte per vedere come abbiamo usato gli oggetti.
Una delle azioni più basilari che possiamo usare è ottenere le informazioni dal documento HTML con cui stiamo lavorando, quindi la prima riga che abbiamo inserito nel nostro codice fa proprio questo e possiamo vederlo:
document.writeln ("
URL: "+ documento.URL);
In questo caso leggiamo il valore dell'immobile documento.URL, che restituisce l'URL del documento corrente, ovvero l'URL utilizzato dal browser per caricare il documento in cui abbiamo il codice.
Vediamo anche come utilizziamo il metodo writeln:
document.writeln ("
URL: "+ documento.URL);
Questo metodo aggiunge semplicemente contenuto alla fine del nostro documento HTML, in questo caso particolare iniziamo aggiungendo un tag
e poi la proprietà URL, con questa abbiamo già modificato la struttura e il contenuto del DOM.
Ora la prossima cosa che abbiamo fatto è stata selezionare tutti gli elementi che hanno il tag p nel documento, per questo usiamo la seguente riga:
var elems = document.getElementsByTagName ("p");
Come vediamo il metodo getElementsByTagName È quello che serve al nostro scopo, allo stesso tempo tutto ciò che questo metodo raccoglie lo assegniamo alla variabile elems.
Nella riga successiva eseguiamo un'iterazione sulla variabile elems, ottenendo gli oggetti assegnati, per ognuno che itereremo aggiungeremo una riga di testo con il suo id e successivamente cambieremo i suoi attributi per modificarne l'aspetto .
for (var i = 0; i <elems.length; i ++) {document.writeln ("ID elemento:" + elems [i] .id); elems [i] .style.border = "doppio nero medio"; elems [i] .style.padding = "4px"; }
Come possiamo vedere, aggiungiamo un bordo a ciascun elemento che abbiamo memorizzato nelle nostre variabili elem e inoltre aggiungiamo un padding.
Dopo tutto questo, vediamo finalmente come appare tutto questo nel browser:
INGRANDIRE
Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo 
