1.1 Concetti base del DOM
Il Document Object Model (DOM) è un'interfaccia di programmazione per documenti web. Rappresenta la struttura del documento come un albero di nodi, dove ogni nodo è una parte del documento, come un elemento, un testo, un commento e così via. Comprendere il DOM e i suoi nodi è un aspetto fondamentale nel lavorare con tecnologie web.
Concetti base del DOM
Cos'è il DOM?
DOM (Document Object Model) è una struttura gerarchica che descrive il contenuto di un documento HTML. Permette ai programmi e agli script di accedere dinamicamente al contenuto del documento e modificarne la struttura, lo stile e il contenuto.
Nodi ed elementi
Nel contesto del DOM, tutte le parti del documento sono considerate come nodi (node). I nodi sono di diversi tipi:
- Nodi elemento: rappresentano i tag HTML.
- Nodi testo: rappresentano il testo all'interno dei nodi elemento.
- Nodi commento: rappresentano i commenti in HTML.
- Nodi documento: rappresentano il documento stesso.
Albero dei nodi
Il DOM è una struttura ad albero, dove ogni nodo può avere discendenti (nodi figli). Il nodo radice è l'oggetto document, che rappresenta l'intero documento HTML.
Esempio di struttura DOM:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Per questo documento, l'albero del DOM apparirà come segue:
document
└── html
├── head
│ └── title
│ └── #text: "Document Title"
└── body
├── h1
│ └── #text: "Hello, World!"
└── p
└── #text: "This is a paragraph."
1.2 Tipi di nodi
1. Nodi elemento
I nodi elemento corrispondono ai tag HTML. Per esempio, un nodo per il tag <body> è chiamato nodo elemento.
Esempio:
In questo esempio, <body> e <h1> sono nodi elemento.
<body>
<h1>Hello, World!</h1>
</body>
2. Nodi di testo
I nodi di testo contengono il testo all'interno dei nodi elemento. I nodi di testo sono discendenti dei nodi elemento e contengono dati sotto forma di stringhe.
Esempio:
In questo esempio, il testo "Hello, World!" è un nodo di testo, discendente del nodo <h1>.
<h1>Hello, World!</h1>
3. Nodi commento
I nodi commento rappresentano i commenti in HTML, iniziano con <!-- e terminano con -->.
Esempio:
In questo esempio, <!-- This is a comment --> è un nodo commento.
<!-- This is a comment -->
<p>This is a paragraph.</p>
4. Nodi documento
Il nodo documento rappresenta il nodo radice dell'albero DOM ed è il nodo genitore di tutti gli altri nodi nel documento.
Esempio:
L'oggetto document in JavaScript rappresenta il nodo documento:
console.log(document);
1.3 Interazione con i nodi DOM
1. Ottenere informazioni sui nodi
Le proprietà dell'oggetto nodo permettono di ottenere informazioni su un nodo specifico. Ad esempio, si può conoscere il tipo del nodo, il suo nome e il contenuto.
Esempio:
<html>
<head>
<title>Il mio sito web</title>
</head>
<body>
<h1>Ciao, mondo!</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // Mostrerà: H1
console.log(heading.nodeType); // Mostrerà: 1 (Nodo elemento)
console.log(heading.textContent); // Mostrerà: "Ciao, mondo!"
2. Modificare il contenuto dei nodi
Il contenuto dei nodi può essere modificato usando le proprietà e i metodi del DOM.
Esempio:
const paragraph = document.querySelector('p');
paragraph.textContent = 'Updated text content';
3. Lavorare con i nodi figli
Ogni nodo del DOM può avere nodi figli, ai quali si può accedere e che possono essere modificati.
Esempio:
<html>
<head>
<title>Il mio sito web</title>
</head>
<body>
<ul>
<li>Chi siamo</li>
<li>Carriera</li>
<li>Contatti</li>
</ul>
</body>
</html>
const list = document.querySelector('ul');
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
console.log(firstItem.textContent); // Mostrerà il testo del primo elemento della lista
console.log(lastItem.textContent); // Mostrerà il testo dell'ultimo elemento della lista
1.4 Proprietà utili
1. Proprietà nodeName e nodeType
nodeNamerestituisce il nome del nodonodeTyperestituisce il tipo di nodo (ad esempio, 1 per nodi elemento, 3 per nodi di testo)
Esempio:
<html>
<head>
<title>Il mio sito web</title>
</head>
<body>
<h1>Ciao, mondo!</h1>
</body>
</html>
const element = document.querySelector('h1');
console.log(element.nodeName); // Mostrerà: H1
console.log(element.nodeType); // Mostrerà: 1
2. Proprietà textContent e innerHTML
textContentrestituisce o imposta il contenuto testuale di un nodoinnerHTMLrestituisce o imposta il contenuto HTML di un nodo
Esempio:
<html>
<head>
<title>Il mio sito web</title>
</head>
<body>
<p>Un paragrafo davvero <b>interessante</b> e <b>utile</b>!</p>
</body>
</html>
const element = document.querySelector('p');
console.log(element.textContent); // Mostrerà il contenuto testuale del paragrafo
console.log(element.innerHTML); // Mostrerà il contenuto HTML del paragrafo
3. Proprietà parentNode, childNodes, firstChild e lastChild
parentNoderestituisce il nodo genitorechildNodesrestituisce una collezione di tutti i nodi figlifirstChildrestituisce il primo nodo figliolastChildrestituisce l'ultimo nodo figlio
Esempio:
<html>
<head>
<title>Il mio sito web</title>
</head>
<body>
<ul>
<li>Chi siamo</li>
<li>Carriera</li>
<li>Contatti</li>
</ul>
</body>
</html>
const element = document.querySelector('ul');
console.log(element.parentNode); // Mostrerà il nodo genitore
console.log(element.childNodes); // Mostrerà la collezione dei nodi figli
console.log(element.firstChild); // Mostrerà il primo nodo figlio
console.log(element.lastChild); // Mostrerà l'ultimo nodo figlio
GO TO FULL VERSION