Travailler avec les relations de nœuds pour coder avec JavaScript - Les nuls

HTML Les arbres DOM ressemblent aux arbres généalogiques dans la relation hiérarchique entre les noeuds. En fait, les termes techniques utilisés par les programmeurs JavaScript pour décrire les relations entre les nœuds d'un arbre prennent leur nom des relations familiales.

• Chaque noeud, à l'exception du noeud racine, a un parent .

• Chaque nœud peut avoir un nombre quelconque d'enfants .

• Les nœuds avec le même parent sont frères et sœurs.

Comme les documents HTML ont souvent plusieurs éléments de même type, le DOM vous permet d'accéder à des éléments distincts dans une liste de nœuds en utilisant un numéro d'index. Par exemple, vous pouvez vous référer au premier élément

dans un document en tant que p [0], et le second élément

en tant que p [1].

Bien qu'une liste de nœuds puisse ressembler à un tableau, ce n'est pas le cas. Vous pouvez parcourir le contenu d'une liste de nœuds en boucle, mais vous ne pouvez pas utiliser les méthodes de tableau sur les listes de nœuds.

Dans ce code, les trois éléments

sont tous des enfants de l'élément. Parce qu'ils ont le même parent, ils sont frères et soeurs.

La famille HTML Premier

Second

Troisième


Dans l'exemple ci-dessus, les commentaires HTML sont aussi fils de l'élément section. Le dernier commentaire avant la balise de fermeture est appelé le dernier enfant de la section.






En comprenant les relations entre les nœuds de document, vous pouvez utiliser l'arborescence DOM pour trouver n'importe quel élément dans un document.
Voici un document HTML contenant un script qui affiche tous les nœuds enfants de l'élément section.
La famille HTML Premier

Second

Troisième


Nœuds dans l'élément de section
var myNodelist = 

document. corps. childNodes [1]. childNodes; pour (i = 0; i 
");}

Voici à quoi ressemble la sortie de ce code dans un navigateur. Notez que le premier nœud enfant de l'élément de section est un nœud de texte. Si vous regardez attentivement le balisage HTML, vous verrez qu'il y a un seul espace entre la balise de section d'ouverture et le commentaire.Même quelque chose d'aussi simple que cet espace unique crée un nœud entier dans l'arborescence DOM. Ce fait doit être pris en compte lorsque vous naviguez dans le DOM en utilisant les relations entre les nœuds.

Affichage de la sortie de votre code.
Le DOM HTML fournit également quelques mots-clés pour naviguer dans les nœuds en utilisant leurs positions par rapport à leurs frères et sœurs ou leurs parents. Les propriétés relatives sont


firstChild: référence le premier enfant d'un nœud


lastChild: référence le dernier enfant du nœud


nextSibling: référence le nœud suivant avec le même nœud parent


previousSibling: référence le précédent nœud avec le même nœud parent


Cet exemple montre comment vous pouvez utiliser ces propriétés relatives pour traverser le DOM.
Les iguanes ne sont pas fun Fonction boldFirstAndLastNav () {document. corps. childNodes [1]. premier enfant. style. fontWeight = "gras"; document. corps. childNodes [1]. dernier enfant. style. fontWeight = "bold";} Accueil | 
href = "pourquoi. html "> Pourquoi les iguanes ne sont-ils pas amusants? | Ce qui peut être fait? | Contactez-nous
Les iguanes ne sont pas amusants. Utilisez les liens ci-dessus pour en savoir plus.
boldFirstAndLastNav ();

Notez que tous les espaces doivent être supprimés entre les éléments de l'élément pour que les propriétés firstChild et lastChild accèdent aux éléments corrects que vous voulez sélectionner et styler.
Voici à quoi ressemble le document lorsqu'il est prévisualisé dans un navigateur. Notez que seuls les premier et dernier liens de la navigation sont en gras.

Aperçu de votre code dans un navigateur.
Ceci est un exemple d'utilisation du DOM pour apporter une modification aux éléments existants dans le document. Cette méthode de sélection des éléments n'est presque jamais utilisée. Il est trop enclin aux erreurs et trop difficile à interpréter et à utiliser.