Document Object Model

Lezione 2 di 13 del corso Metodi DOM di JavaScript di Coddy.

Il Document Object Model (DOM) è una rappresentazione gerarchica di un documento HTML, che consente a JavaScript di interagire con gli elementi della pagina web e di manipolarli.

Il DOM rappresenta un documento HTML come un albero di oggetti.
Ogni elemento nel codice HTML corrisponde a un nodo dell'albero.
Il documento stesso è il nodo radice.
Vari metodi DOM consentono di accedere a questi nodi e ai loro contenuti, crearli e modificarli. Questo ti permette di cambiare dinamicamente la pagina web.

Per esempio, questo codice:

<html>
	<head>
		<title>My title</title>
	</head>
	<body>
		<h1>A heading</h1>
		<a href="#">Link text</a>
	</body>
</html>

Verrà rappresentato dalla seguente struttura DOM:

Approfondiamo!

Provalo tu

Questa lezione non include una sfida di codice.

Tutte le lezioni di Metodi DOM di JavaScript

1Introduzione

IntroduzioneDocument Object Model

2Metodi DOM I

getElementById Modificare lo stile di un elemento getElementsByClassName Iterare e manipolare getElementsByTagName querySelector

3Metodi DOM II

querySelectorAll addEventListener innerHTML createElement e appendChild Attivazione/disattivazione con classList

Esercitati da solo: Playground Web