I nodi degli elementi DOM modellano gli elementi in un documento HTML. Proprio come un elemento in una pagina HTML, il DOM ci consente di accedere agli attributi di un nodo, come la sua classe, id e lo stile in linea.
Javascript permette di accedere al DOM della pagina HTML e di modificare struttura e contenuti.
document
Il Document Object Model, abbreviato in DOM, è una potente struttura ad albero che organizza gli elementi di una pagina Web e consente ai linguaggi di scripting di accedervi. Questa lezione si concentrerà su alcuni dei metodi e delle proprietà più utili dell’interfaccia DOM in JavaScript. Questa interfaccia è implementata da tutti i browser moderni.
Andiamo con ordine! L’oggetto document in JavaScript è la porta per la struttura DOM. L’oggetto document consente di accedere al nodo principale dell’albero DOM. Prima di poter accedere a un elemento specifico della pagina, è necessario accedere alla struttura del documento stesso. L’oggetto document consente agli script di accedere agli elementi figlio del DOM come proprietà.
Ad esempio, se si desidera accedere <body> all’elemento dallo script, è possibile accedervi come proprietà dell’oggetto documento utilizzando document.body. Questa proprietà restituirà l’elemento body di tale DOM.
<script>
document.body.innerHTML = "Ciao Mondo";
document.body.innerHTML = '<p><b>Ciao</b>Mondo</p>';
</script>
Supponiamo di dover stampare in un h1 il seguente codice all’interno del body della pagina HTML:
document.body = '<h1>Che bella giornata di sole!</h1>';
querySelector
querySelector è un metodo JavaScript che permette di selezionare un elemento all’interno di un documento HTML utilizzando un selettore CSS. Restituisce il primo elemento che corrisponde al selettore specificato. E possibile selezionare gli elementi in vari modi; per selezionare attraverso l’id associato all’elemento è possibile usare la seguente sintassi:
<div id="mioDiv">Elemento selezionato</div>
<script> const elemento = document.querySelector('#mioDiv');
console.log(elemento.textContent); // Stampa: Elemento selezionato</script>
getElementById
querySelector è un metodo JavaScript che permette di selezionare un elemento all’interno di un documento HTML utilizzando il suo attributo id. Quando chiami getElementById, passi come argomento l’id dell’elemento che vuoi selezionare. Il metodo quindi cerca all’interno del documento HTML un elemento con l’id corrispondente e lo restituisce se viene trovato, altrimenti restituisce null.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Documento</title>
</head>
<body>
<div id="mioDiv">Elemento selezionato</div>
<p id="paragrafo">Paragrafo selezionato</p> <script> const elementoDiv = document.getElementById('miaDiv');
console.log(elementoDiv.textContent); // Stampa: Elemento selezionato
const elementoParagrafo = document.getElementById('paragrafo');
console.log(elementoParagrafo.textContent); // Stampa: Paragrafo selezionato </script>
</body>
</html>
Nel primo esempio, getElementById seleziona l’elemento <div> con l’id “mioDiv” e restituisce l’oggetto corrispondente. Nel secondo esempio, seleziona l’elemento <p> con l’id “paragrafo” e restituisce l’oggetto corrispondente.
E’ possibile cambiare il contenuto interno ad alcuni elementi nel DOM utilizzando gli eventi e invocando una funzione che compie questa operazione:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Documento</title>
</head>
<body>
<div id="campo1">Test</div>
<input type="submit" onclick="cambiaTesto()" value="AZIONE!">
<script>
function cambiaTesto()
{
let element = document.getElementById('campo1');
element.innerHTML = 'Ciao';
}
</script>
</body>
</html>
getElementsByTagName
getElementsByTagName è un metodo JavaScript che permette di selezionare tutti gli elementi all’interno di un documento HTML che corrispondono a un determinato nome di tag. Restituisce una collezione di tutti gli elementi corrispondenti al tag specificato.
getElementsByTagName restituisce un oggetto di tipo HTMLCollection, che è simile a un array ma non è un array effettivo. Puoi accedere agli elementi all’interno di questa raccolta utilizzando l’indice numerico o un ciclo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<div>
<p>Paragrafo 1</p>
<p>Paragrafo 2</p>
</div>
</body>
</html>
script
const listaElementiLi = document.getElementsByTagName('li');
console.log(listaElementiLi.length); // Stampa: 3
for (let i = 0; i < listaElementiLi.length; i++) {
console.log(listaElementiLi[i].textContent);
}
getElementsByClassName
getElementsByClassName è un metodo JavaScript che permette di selezionare tutti gli elementi all’interno di un documento HTML che hanno una determinata classe. Restituisce una collezione di tutti gli elementi che corrispondono alla classe specificata.
Quando utilizzi getElementsByClassName, passi come argomento il nome della classe degli elementi che vuoi selezionare. Il metodo quindi cerca all’interno del documento HTML tutti gli elementi che hanno la classe specificata e restituisce una collezione di essi.
getElementsByClassName restituisce un oggetto di tipo HTMLCollection, che è simile a un array ma non è un array effettivo. Puoi accedere agli elementi all’interno di questa raccolta utilizzando l’indice numerico o un ciclo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.rosso {
color: red;
}
</style>
</head>
<body>
<p class="rosso">Paragrafo 1</p>
<p>Paragrafo 2</p>
<p class="rosso">Paragrafo 3</p>
</body>
</html>
script
const paragrafiRossi = document.getElementsByClassName('rosso');
console.log(paragrafiRossi.length); // Stampa: 2
for (let i = 0; i < paragrafiRossi.length; i++) {
console.log(paragrafiRossi[i].textContent);
}
Torna a Javascript
