2.1 Metodi di accesso agli elementi
La navigazione nel DOM (Document Object Model) è un compito importante quando si lavora con documenti web. JavaScript offre molti metodi per cercare e accedere agli elementi del documento. Questi metodi permettono agli sviluppatori di trovare facilmente gli elementi desiderati e manipolarli.
1. Metodo getElementById()
Il metodo getElementById() restituisce l'elemento con l'attributo id con il valore specificato. È uno dei metodi più semplici e frequentemente utilizzati.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="content">This is the content</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // Mostra: This is the content
</script>
</body>
</html>
2. Metodo getElementsByClassName()
Il metodo getElementsByClassName() restituisce una collezione di tutti gli elementi che hanno la classe specificata. La collezione è "live", il che significa che si aggiorna automaticamente quando il DOM cambia.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<p class="text">Paragraph 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // Mostra: 3
</script>
</body>
</html>
3. Metodo getElementsByTagName()
Il metodo getElementsByTagName() restituisce una collezione di tutti gli elementi con il tag specificato. Questa collezione è anch'essa "live".
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Mostra: 3
</script>
</body>
</html>
4. Metodo querySelector()
Il metodo querySelector() restituisce il primo elemento che corrisponde al selettore CSS specificato. È un metodo molto potente e flessibile per cercare elementi.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // Mostra: Paragraph 2
</script>
</body>
</html>
5. Metodo querySelectorAll()
Il metodo querySelectorAll() restituisce una collezione statica (non modificabile) di tutti gli elementi che corrispondono al selettore CSS specificato.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // Mostra: 3
</script>
</body>
</html>
2.2 Navigazione tra i nodi
Il DOM fornisce anche metodi per navigare tra i nodi rispetto all'elemento corrente.
1. Proprietà parentNode
La proprietà parentNode restituisce il nodo genitore del nodo corrente.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="container">
<p>Paragraph</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // Mostra: container
</script>
</body>
</html>
2. Proprietà childNodes
La proprietà childNodes restituisce una collezione di tutti i nodi figli del nodo corrente, inclusi i nodi di testo.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // Mostra il numero di tutti i nodi figli, incluso testo
</script>
</body>
</html>
Magari ti stai ancora chiedendo perché il risultato è 7?
Come detto sopra, la proprietà childNodes restituisce una collezione di tutti i nodi figli del nodo corrente, inclusi i nodi di testo (spazi, simboli, nuove righe ecc.). Il markup HTML contiene spazi e nuove righe tra gli elementi <li>, che sono anch'essi considerati nodi separati.
Nell'esempio sopra, tra il tag <ul> e il primo <li> c'è una nuova riga (e possibilmente uno spazio) — questo è considerato un nodo di testo. La stessa situazione si verifica tra tutti i <li> e dopo l'ultimo <li>. Pertanto, invece di tre elementi lista, childNodes include questi nodi di testo, portando il conteggio totale a 7.
Per ottenere solo elementi (ignorando i nodi di testo), puoi usare la proprietà children, che restituisce solo gli elementi figli:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. Proprietà firstChild e lastChild
Le proprietà firstChild e lastChild restituiscono rispettivamente il primo e l'ultimo nodo figlio.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
Potresti essere sorpreso che non viene mostrato nulla nella console. Tuttavia, non è così. Sono stati mostrati l'ultimo nodo figlio Item 1 e Item 3 (nuova riga). Se sei incappato in questo, ti consiglio di rileggere p.2 Proprietà childNodes
4. Proprietà nextSibling e previousSibling
Le proprietà nextSibling e previousSibling restituiscono i nodi successivi e precedenti allo stesso livello di gerarchia.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // Mostra: Item 3
console.log(prev.textContent); // Mostra: Item 1 (se si ignorano i nodi di testo)
</script>
</body>
</html>
2.3 Navigazione tra i nodi elemento
5. Proprietà nextElementSibling e previousElementSibling
Queste proprietà restituiscono i nodi elemento successivi e precedenti (ignorando testo e commenti).
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // Mostra: Item 3
console.log(prev.textContent); // Mostra: Item 1
</script>
</body>
</html>
6. Proprietà firstElementChild e lastElementChild
Queste proprietà restituiscono i primi e ultimi nodi elemento figli (ignorando testo e commenti).
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // Mostra: Item 1
console.log(last.textContent); // Mostra: Item 3
</script>
</body>
</html>
GO TO FULL VERSION