Travailler avec des relations de noeuds de coder avec javascript

Arbres DOM HTML ressemblent à des arbres de la famille dans la relation hiérarchique entre les nœuds. En fait, les termes techniques utilisés par les programmeurs javascript pour décrire les relations entre les noeuds dans un arbre prennent leurs noms de relations familiales.

  • Chaque noeud, sauf le noeud racine, a une parent.

  • Chaque nœud peut avoir un certain nombre de enfants.

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

Parce que les documents HTML ont souvent de multiples éléments qui sont du même type, le DOM vous permet d'accéder à des éléments distincts dans une liste de noeud à l'aide d'un numéro d'index. Par exemple, vous pouvez vous référer à la première

élément dans un document en tant que p [0], et la seconde

en tant que noeud d'élément p [1].

Bien qu'une liste de noeud peut ressembler à un tableau, il est pas. Vous pouvez parcourir le contenu d'une liste de nœuds, mais vous ne pouvez pas utiliser des méthodes de tableau sur les listes de noeuds.

Dans ce code, les trois

éléments sont tous des enfants de la

élément. Parce qu'ils ont le même parent, ils sont frères et sœurs.

La famille HTML

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

  • premier enfant: Référence au premier enfant d'un noeud

  • dernier enfant: Référence au dernier enfant du noeud

  • nextSibling: Références noeud suivant avec le même noeud parent

  • previousSibling: Références nœud précédent avec le même noeud parent

Cet exemple montre comment vous pouvez utiliser ces propriétés relatives à traverser le DOM.

Les iguanes sont No Fun

Les iguanes sont pas amusant d'être autour. Utilisez les liens ci-dessus pour en savoir plus.

Notez que tout l'espacement doit être retiré entre les éléments au sein de la

élément pour que le premier enfant et dernier enfant propriétés pour accéder aux éléments corrects que vous souhaitez sélectionner et de style.

Ceci est ce que le document ressemble quand visualisé dans un navigateur. Notez que seulement les premiers et derniers maillons de la navigation sont en gras.

Aperçu de votre code dans un navigateur.
Aperçu de votre code dans un navigateur.

Ceci est un exemple de l'utilisation du DOM de faire un changement à des éléments existants dans le document. Cette méthode de sélection des éléments est presque jamais utilisée. Il est trop sujettes à des erreurs et trop difficile à interpréter et à utiliser.


» » » » Travailler avec des relations de noeuds de coder avec javascript