Comment accéder aux nœuds en JavaScript

Méthodes pour accéder aux nœuds : 1. Utilisez l'attributownerDocument ; 2. Utilisez l'attribut parentNode ; 3. Utilisez l'attribut childNodes ; 4. Utilisez l'attribut firstChild ; attribut nextSibling, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Grâce à la relation arborescente entre les nœuds, nous pouvons localiser chaque nœud dans le document. DOM définit les propriétés suivantes pour le type Node afin de faciliter la traversée JavaScript de chaque nœud de l'arborescence du document.

• ownerDocument : renvoie l'élément racine (objet document) du nœud actuel
• parentNode : renvoie le nœud parent du nœud actuel. Tous les nœuds n'ont qu'un seul nœud parent
• childNodes : renvoie la liste de tous les nœuds enfants du nœud actuel
• firstChild : renvoie le premier nœud enfant du nœud actuel
• lastChild : Renvoie le dernier nœud enfant du nœud actuel
• nextSibling : Renvoie les nœuds frères adjacents après le nœud actuel
• previousSibling : Renvoie les nœuds frères adjacents avant le nœud actuel

【1】childNodes

Chaque nœud a un attribut childNodes, qui contient un objet nodeList, qui représente une liste de tous les nœuds enfants.

nodeList est un objet de type tableau utilisé pour enregistrer un ensemble ordonné de nœuds auxquels les utilisateurs peuvent accéder en inscrivant leurs positions. Bien que childNodes puisse accéder à la valeur de nodeList via la syntaxe entre crochets et que l'objet childNodes contienne une propriété length, qui indique le nombre (longueur) de nœuds enfants contenus dans la liste, childNodes n'est pas un tableau et ne peut pas appeler directement des méthodes de tableau.

【2】parentNode

Chaque nœud a un attribut parentNode, qui pointe vers le nœud parent dans l'arborescence du document. Tous les nœuds contenus dans la liste childNodes ont le même nœud parent, donc leurs propriétés parentNode pointent toutes vers le même nœud.

Le nœud renvoyé par l'attribut parentNode est toujours un nœud de type élément, car seuls les nœuds élément peuvent contenir des nœuds enfants. Cependant, le nœud de document n'a pas de nœud parent et la propriété parentNode du nœud de document renverra null.

【3】firstChild et lastChild

La propriété firstChild renvoie le premier nœud enfant et la propriété lastChild renvoie le dernier nœud enfant. Les propriétés firstChild et lastChild des nœuds de texte et des nœuds d'attribut renvoient toujours null.

Remarque : firstChild est équivalent au premier élément de childNodes, et la valeur de l'attribut lastChild est équivalente au dernier élément de childNodes.

node.childNodes[0] = node.firstChild
node.childNodes[node.childNodes.length-1]  = node.lastChild

【4】nextSibling et previousSibling

la propriété nextSibling renvoie le nœud adjacent suivant et la propriété previousSibling renvoie le nœud adjacent précédent. S'il n'y a aucun nœud adjacent partageant le même parent, ils renverront null.

【5】ownerDocument

Dans l'arborescence des documents DOM, vous pouvez utiliser l'attributownerDocument pour accéder au nœud racine.

node.ownerDocument

Grâce à l'attributownerDocument de chaque nœud, nous pouvons accéder directement au nœud du document sans avoir à passer par des couches de retour en arrière pour arriver au sommet. De plus, les utilisateurs peuvent également utiliser les méthodes suivantes pour accéder au nœud racine.

document.documentElement

[Recommandations associées : Tutoriel d'apprentissage Javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!