English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial di base JavaScript

Oggetti JavaScript

Funzioni JavaScript

HTML DOM JS

BOM del browser JS

Tutorial di base AJAX

Manuale di riferimento JavaScript

Navigazione JS DOM

HTML DOM permette a JavaScript di navigare nelbero dei nodi utilizzando le relazioni dei nodi.

Nodi DOM

Secondo lo standard W3C HTML DOM, tutto il contenuto di un documento HTML è un nodo:

  • L'intero documento è un nodo di documento

  • Ogni elemento HTML è un nodo di elemento

  • Il testo all'interno di un elemento HTML è un nodo di testo

  • Ogni attributo HTML è un nodo di attributo (non raccomandato per l'uso)

  • Tutte le annotazioni sono nodi di annotazione

Utilizzando HTML DOM, è possibile accedere a tutti i nodi delbero dei nodi tramite JavaScript.

È possibile creare nuovi nodi e modificare o eliminare tutti i nodi.

Relazioni dei nodi

I nodi nelbero dei nodi hanno una relazione gerarchica.

I termini “genitore”, “figlio” e “fratello” vengono utilizzati per descrivere le relazioni.

  • Nelbero dei nodi, il nodo superiore è chiamato radice (o nodo radice)

  • Ogni nodo ha un solo genitore, eccetto il nodo radice (il nodo radice non ha genitore)

  • Un nodo può avere più figli

  • I fratelli (fratelli) sono nodi che condividono lo stesso genitore

<html>
　　<head>
<title>DOM Tutorial</title>
　　</head>
　　
<h1>Nodi DOM</h1>
<p>Hello, World</p>
　　
</html>

Dall'HTML sopra, puoi leggere:
<html>È il nodo radice e non ha genitore
<html>È il genitore di <head> e <body>
<head>È il primo figlio di <html>
<body>È l'ultimo figlio di <html>
e:
<head>Ha un figlio: <title>
<title>Ha un figlio (un nodo di testo): “DOM Tutorial”
<body>Ha due figli: <h1> e <p>
<h1> ha un figlio (un nodo testo): “DOM Nodes”
<p> ha un figlio (un nodo testo): “Hello, world”
<h1> e <p> sono同级

Navigazione tra i nodi

Puoi utilizzare i seguenti attributi dei nodi per navigare tra i nodi con JavaScript:

Accedi ai figli del nodo

Puoi usarefirstChildL'attributo del nodo DOM viene utilizzato per accedere al primo figlio diretto del nodo.

<p id="para">
　　<span>Primo span</span>
　　<b>Primo Grassetto</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName); // restituisce SPAN
</script>
Testa per vedere <‹/›

Attenzione:Nell'esempio sopra, l'output sarà#text,Poiché è stato inserito un nodo testo per mantenere lo spazio tra i tag. Ogni spazio creerà un#textIl nodo, dagli spazi singoli a quelli multipli, tabulazioni, ecc.

Ma, se elimini gli spazi, non verrà inserito#textIl nodo, e l'elemento span diventerà il primo figlio dell'elemento paragrafo:

<p id="para"><span>Primo span</span> <b>Primo Grassetto</b></p>
<script>
var para = document.getElementById("para");
alert(para.firstChild.nodeName); // restituisce SPAN
</script>
Prova a vedere <‹/›>

Puoi accedere al primo figlio anche in questo modo:

para.childNodes[0].nodeName; // restituisce SPAN
Prova a vedere <‹/›>

Puoi usarelastChildL'attributo del nodo DOM viene utilizzato per accedere all'ultimo figlio diretto del nodo.

para.lastChild.nodeName; // restituisce B
Prova a vedere <‹/›>

Per evitare di apparire#texto#commentNodofirstChildelastChildPuoi scegliere di utilizzare:

firstElementChildL'attributo restituisce il primo elemento figlio dell'elemento genitore specificato.

<p id="para">
　　<span>Primo span</span>
　　<b>Primo Grassetto</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName); // restituisce SPAN
</script>
Prova a vedere <‹/›>

lastElementChildL'attributo restituisce l'ultimo elemento figlio dell'elemento genitore specificato.

<p id="para">
　　<span>Primo span</span>
　　<b>Primo Grassetto</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.lastElementChild.nodeName); // restituisce B
</script>
Prova a vedere <‹/›>

Nota:QuestonodeNameÈ un attributo di sola lettura che restituisce il nome del nodo corrente come stringa.

Accedi al nodo genitore

Puoi usareparentNodeL'attributo viene utilizzato per accedere al genitore del nodo specificato nel DOM.

<div>
　　　<p>Questo è il primo paragrafo P all'interno del DIV</p>
　　　<p id="para">Questo è il secondo P all'interno del DIV</p>
　　　<p>Questo è il terzo P all'interno del DIV</p>
</div>
<script>
var para = document.getElementById("para");
alert(para.parentNode.nodeName); // restituisce DIV
</script>
Prova a vedere <‹/›>

Puoi anche usareparentElementl'attributo restituisce l'elemento genitore dell'elemento specificato.

per accedere ai nodi fratello

Puoi usarepreviousSiblingenextSiblingl'attributo per accedere ai nodi precedenti e successivi nel albero DOM.

<div id="div-1">Ecco div-1</div>
<div id="div-2">Ecco div-2</div>
<div id="div-3">Ecco div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousSibling.nodeName);
alert(x.nextSibling.nodeName);
</script>
Prova a vedere <‹/›>

o, puoi usarepreviousElementSiblingenextElementSiblingper saltare qualsiasi nodo di testo vuoto per ottenere l'elemento同级 fratello precedente e successivo.

<div id="div-1">Ecco div-1</div>
<div id="div-2">Ecco div-2</div>
<div id="div-3">Ecco div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousElementSibling.textContent);
alert(x.nextElementSibling.textContent);
</script>
Prova a vedere <‹/›>

textContentl'attributo rappresenta il contenuto testuale del nodo.

Nodo radice DOM

Le seguenti due proprietà permettono di accedere a tutto il documento:

document.bodyimposta o restituisce l'elemento del documento.

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>Nodo radice DOM
　　<p>La proprietà "document.body" imposta o restituisce l'elemento "body" del documento.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</html>
Prova a vedere <‹/›>

document.documentElementl'attributo restituisce il documento del<html>elemento.

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>Nodo radice DOM
　　<p>l'attributo "document.documentElement" restituisce l'elemento radice del documento.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</html>
Prova a vedere <‹/›>

Attributo nodeType

nodeTypeL'attributo restituisce in forma numerica il tipo di nodo specificato.

var x = document.getElementById("myPara").nodeType;
Prova a vedere <‹/›>

Il DOM tree è composto da diversi tipi di nodi, ad esempio elementi, testo, commenti, ecc.

Ogni nodo ha unnodeTypeProprietà, utilizzabili per trovare il tipo di nodo da trattare.

La tabella seguente elenca i principali tipi di nodo:

NodoTipoEsempio
ELEMENT_NODE1<p class="heading">Ciao, Mondo</p>
ATTRIBUTE_NODE2　class =“heading”（non raccomandato)
TEXT_NODE3Ciao, Mondo
COMMENT_NODE8<！--Questo è un commento-->
DOCUMENT_NODE9Il documento HTML stesso (padre di <html>)
DOCUMENT_TYPE_NODE10<！doctype html>
Oggetto modello di finestra JSModifica delle proprietà degli elementi con JS DOM