navigation HTML DOM
A travers le DOM HTML, vous êtes en mesure d'utiliser le noeud dans la relation d'arborescence de navigation du noeud.
HTML DOM liste de noeuds
getElementsByTagName () retourne une liste de nœuds. Liste Node est un tableau de noeud.
Le code document sélectionné suivant tous <p> node:
Exemples
On peut y accéder par l'étiquette suivante. Pour accéder à la seconde <p>, vous pouvez écrire:
Essayez »
Remarque:
Sous le label commence à 0.
DOM HTML Liste Node Longueur
attribut de longueur définit le nombre de noeuds dans la liste des noeuds.
Vous pouvez utiliser la propriété de la longueur à la liste de noeud de boucle:
Exemples
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
Essayez »
Des exemples d'analyse:
- Obtenez tous <p> nœud d'élément
- La valeur de sortie de chaque élément <p> du noeud de texte
Navigation relation de noeud
Vous pouvez utiliser trois attributs de noeud: parentNode, firstChild et lastChild, naviguer dans la structure du document.
Considérons le fragment HTML suivant:
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
- Le premier élément <p> est le premier enfant de l'élément <body> (firstChild)
- <Div> est le dernier élément enfant élément <body> (lastChild)
- <Body> est le premier élément <p> et <div> le nœud parent de l'élément (parentNode)
propriété firstChild peut être utilisé pour accéder à des éléments du texte:
Exemples
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Essayez »
nœud racine DOM
Il y a deux attributs spéciaux, vous pouvez accéder à tous les documents:
- document.documentElement - tous les documents
- document.body - corps du document
Exemples
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
Essayez »
childNodes et nodeValue
En plus de la propriété innerHTML, vous pouvez également utiliser les childNodes et la propriété nodeValue pour obtenir le contenu de l'élément.
Le code suivant obtient l'id = "intro" les <p> valeurs d'éléments:
Exemples
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
Essayez »
Dans l'exemple ci-dessus, getElementById est une méthode, tandis que childNodes et nodeValue sont des propriétés.
Dans ce tutoriel, nous allons utiliser la propriété innerHTML. Cependant, la méthode d'apprentissage ci-dessus permet de naviguer dans la structure et la compréhension de l'arbre DOM.