Dans le développement d'applications Web, en particulier les programmes Web2.0, il est souvent nécessaire d'obtenir un élément dans la page, puis de mettre à jour le style, le contenu, etc. de l'élément. Comment mettre à jour les éléments est le premier problème à résoudre. Il est gratifiant qu'il existe de nombreuses façons d'obtenir des nœuds utilisant JavaScript. Voici un bref résumé (les méthodes suivantes ont été testées dans IE7 et Firefox 2.0.0.11):
1. Passez le nœud de document de niveau supérieur:
(1) Document.getElementById (eleMedId): Cette méthode peut obtenir avec précision les éléments requis via l'ID de nœud, qui est une méthode relativement simple et rapide. Si la page contient plusieurs nœuds avec le même ID, seul le premier nœud est renvoyé.
De nos jours, plusieurs bibliothèques JavaScript telles que Prototype et Mootools sont apparues, qui fournissent une méthode plus simple: $ (id), et le paramètre est toujours l'ID du nœud. Cette méthode peut être considérée comme
Une autre façon d'écrire document.getElementById (), mais la fonction de $ () est plus puissante. Pour une utilisation spécifique, veuillez vous référer à leurs documents API respectifs.
(2) Document.getElementsByName (elementName): Cette méthode obtient le nœud via le nom du nœud. À partir du nom, on peut voir que cette méthode ne renvoie pas un élément de nœud, mais un tableau de nœuds avec le même nom. Ensuite, nous pouvons parcourir l'attribut du nœud pour obtenir une boucle pour déterminer s'il s'agit du nœud requis.
Par exemple: dans HTML, Checkbox et Radio utilisent tous les deux la valeur d'attribut de même nom pour identifier les éléments d'un groupe. Si nous voulons obtenir l'élément sélectionné maintenant, nous obtenons d'abord l'élément trempé, puis boucle pour déterminer si la valeur d'attribut vérifié du nœud est vraie.
(3) document.getElementsByTagName (TagName): Cette méthode obtient le nœud via la balise du nœud, et la méthode renvoie également un tableau, par exemple:
document.getElementsByTagName ('A') renverra tous les nœuds hyperliens sur la page. Avant d'acquérir un nœud, vous connaissez généralement le type de nœud, donc l'utilisation de cette méthode est relativement simple. Mais l'inconvénient est également évident, c'est-à-dire que le réseau retourné peut être très important, ce qui perdra beaucoup de temps. Alors, cette méthode est-elle inutile? Bien sûr que non. Cette méthode est différente des deux ci-dessus. Ce n'est pas une méthode propriétaire de nœuds de document. D'autres nœuds peuvent également être appliqués, comme mentionné ci-dessous.
2. Passez le nœud parent:
(1) parentObj.FirstChild: Cette méthode peut être utilisée si le nœud est le premier enfant d'un nœud connu (parentObj). Cette propriété peut être utilisée de manière récursive, ce qui signifie qu'il est pris en charge
parentObj.firstchild.firstchild.firstchild ..., afin que vous puissiez obtenir des nœuds plus profonds.
(2) parentObj.lastchild: évidemment, cette propriété est le dernier nœud enfant du nœud connu (parentObj). Comme Firstchild, il peut être utilisé récursivement.
En usage, si nous combinons les deux, nous réaliserons un effet plus excitant, à savoir: parentobj.firstchild.lastchild.lastchild ...
(3) parentObj.childNodes: Obtenez le tableau des nœuds enfants des nœuds connus, puis vous pouvez trouver les nœuds requis via des boucles ou des index.
Remarque: Après les tests, il a été constaté que le tableau des nœuds enfants directs est obtenu sur IE7, tandis que le tableau de nœuds enfants est obtenu sur Firefox2.0.0.11 est tous les nœuds enfants, c'est-à-dire les nœuds enfants, y compris les nœuds enfants.
(4) ParentObj.children: Obtenez le tableau de nœuds enfants direct des nœuds connus.
Remarque: Après les tests, sur IE7, l'effet est le même que ChildNodes, mais Firefox 2.0.0.11 ne le soutient pas. C'est aussi pourquoi je veux utiliser différents styles provenant d'autres méthodes. Par conséquent, il n'est pas recommandé de l'utiliser.
(5) parentObj.getElementsByTagName (TagName): La méthode d'utilisation ne sera pas répétée, il renvoie un tableau de nœuds enfants d'un nœud connu avec une valeur spécifiée parmi tous les nœuds enfants d'un nœud connu. Par exemple:
parentObj.getElementsByTagName («A») renvoie tous les hyperliens dans les nœuds enfants connus.
3. Obtenez des nœuds adjacents:
(1) Neighbornode.PreviousSibling: Obtenez le nœud précédent d'un nœud connu (Neighbournode). Cette propriété semble être utilisée récursivement, tout comme le Firstchild et Lastchild dans les précédents.
(2) Neighbornode.NextSibling: Obtenez le nœud suivant d'un nœud connu (Neighbournode), qui prend également en charge la récursivité.
4. Obtenez des nœuds enfants:
(1) ChildNode.ParentNode: Obtenez le nœud parent d'un nœud connu.
Les méthodes mentionnées ci-dessus ne sont que quelques méthodes de base. Si vous utilisez des bibliothèques JavaScript telles que le prototype, vous pouvez également obtenir d'autres méthodes différentes, telles que l'acquisition de classe via des nœuds, etc. Cependant, si les méthodes ci-dessus peuvent être utilisées de manière flexible, je pense que la plupart des procédures devraient être en mesure de faire face.