56 il DOM

Pubblicato il di

Il Document Object Model è una rappresentazione dei documenti della pagina HTML interpretata ad oggetti. È lo standard universale indipendente dalle piattaforme e dai linguaggi di programmazione.

La strutture dei documenti è ad albero e con js possiamo manipolare gli elementi del DOM.

Vediamo ora come accedere con js agli elementi del DOM, per prima cosa dobbiamo essere sicuri che gli elementi della pagina siano caricati, altrimenti potremmo ricevere errori su elementi non ancora caricati e quindi non trovati da js. Per farsi che il documento venga caricato prima dell’esecuzione del codice js esiste un evento che riceve tale risposta dal browser: addEventListener()

document.addEventListener('');

Il primo parametro che andremo ad inserire è l’evento di cui vogliamo attenderne il caricamento, nel nostro caso DOMContentLoaded e come secondo parametro metteremo la funzione che dovrà eseguire delle azioni sul DOM

document.addEventListener('DOMContentLoaded', function () {
    
});

Per esempio andiamo a cambiare il colore di background del tag <body>, quindi inseriremo nella funzione:

document.addEventListener('DOMContentLoaded', function () {
    document.body.style.backgroundColor = '#ffcccc';
});

Come già sappiamo document è l’elemento più in alto di tutti, corrisponde al documento, ovvero alla finestra del nostro browser. Dopo document troviamo body che è l’elemento interessato e la sua proprietà di stile style che agisce sull’aspetto. Con questo criterio è possibile applicare qualsiasi regola di stile CSS, per chi non avesse nozioni di CSS, rimando alla lezione inerente.

  •  getElementsByTagName()

Un altro metodo per accedere ad un elemento è sfruttare la funzione document.getElementsByTagName()

let bod = document.getElementsByTagName('body');

getElementsByTagName() restituisce più valori, anche se in questo caso il body è unico, bod sarà una collezione di nodi, ovvero conterrà più valori e in js lo devo trattare come un array.

bod[0].style.backgroundColor = 'orange';

Per esempio ammettiamo di avere 2 tag <h2>

<h2 id="h2-primo">test primo h2</h2>
<h2 class="h2-testo">test secondo h2</h2>

posso selezionare i tags <h2> e ciclarli con un for cambiando loro lo stile e aggiungo una classe con className

let acca = document.getElementsByTagName('h2');
console.log(acca);
for (let i =0; i < acca.length; i++){
    acca[i].style.color= 'green';
    acca[i].className= 'color-h2-green';
}

  • getElementById()

Un altro modo per selezionare un elemento html è quello di richiamarlo tramite il suo id con document.getElementById()

let varh2 = document.getElementById('h2-primo');

In questo caso, essendo gli ID univoci (o almeno dovrebbero), il metodo restituisce un solo risultato. Poi posso intervenire applicando o modificando le regole di stile

varh2.style.textTransform = 'uppercase';
varh2.style.color = 'green';

posso cambiare il contenuto dell’ html

varh2.innerHTML = 'HELLO WORLD';

oppure posso intervenire sugli eventi come vedremo maggiormente più avanti

varh2.onclick = function() {
   alert('mi hai cliccato')
};

oppure sfruttare il metodo addEventListener()

varh2.addEventListener('mouseover', 
    function() {
       varh2.style.color = 'red';
       }
);
varh2.addEventListener('mouseout',
     function() {
        varh2.style.color = 'green'
     }
);

  • getElementsByClassName()

Ho la possibilità di selezionare gli elementi anche tramite la loro classe con document.getElementsByClassName()

let calssh2 = document.getElementsByClassName('h2-testo')

Visto che le classi possono interessare più elementi il risultato è un array anche in questo caso. Un abbona norma è fare un controllo con un if, che valore restituito non sia null

if(classh2) {
    let elem = classh2[0];
    elem.style.backgroundColor = 'silver';
}

  • querySelector

Un metodo più moderno supportato ormai da ogni browser è quello del querySelector(). Infatti con il querySelector non è più necessario utilizzare il getElementById() e il getElementsByClassName(), si utilizza solo querySelector() indicando il tag che vogliamo selezionare, proprio come con gli altri metodi, preceduto da un cancelletto ( # ) per un ID e da un punto ( . ) per una classe ,  seguendo le stesse regole del CSS.

ecco l’esempio per ID

let var2h2 = document.querySelector('#h2-primo');
var2h2.style.border = 'solid red 2px';

similmente per le classi

let class2h2 = document.querySelector('.h2-testo');
class2h2.style.fontSize = '50px';

posso usare anche il tag HTML che precede la classe, quindi

let class2h2 = document.querySelector('h2.h2-testo');
class2h2.style.fontSize = '50px';

Usare il tag HTML davanti alla classe (o all’ID ) con il querySelector non trova molte applicazioni, perchè il querySelector restituisce un solo risultato.

  • querySelectorAll

Quando ho necessità di selezionare più elementi posso usare il querySelectorAll() 

let var3h2 = document.querySelectorAll('h2');
var3h2[0].style.fontSize = '80px';

Possiamo anche ciclare l’array per applicare proprietà a più elementi.

let var3h2 = document.querySelectorAll('h2');
 for(let i=0; var3h2[i]; i++) {
  var3h2[i].style.fontSize = '80px';
 }

Da notare che l’indice i ha come condizione prima di terminare il ciclo, la lunghezza delle posizioni dell’array var3h2[i]; .

Posso anche inserire più selettori

let var3h2 = document.querySelectorAll('h2 , h1');
 for(let i=0; var3h2[i]; i++) {
  var3h2[i].style.fontSize = '80px';
 }