


Comment parcourir l'arborescence DOM dans l'ordre en compétences javascript_javascript
L'arborescence DOM est une structure arborescente composée de tous les nœuds du document (nœuds d'éléments, nœuds de texte, nœuds de commentaires, etc. L'analyse et la construction de l'arborescence DOM sont une fonction clé à implémenter par le navigateur. Puisque l'arborescence DOM est une structure arborescente, nous pouvons utiliser les méthodes associées de parcours de la structure arborescente pour parcourir l'arborescence DOM. En même temps, le module "Traversal" dans DOM2 fournit deux nouveaux types, afin que le DOM puisse être facilement. implémenté. Parcours de précommande de l’arbre.
Remarque : les cinq méthodes de cet article sont toutes des méthodes de parcours de pré-commande du DOM (traversée en profondeur en premier) et se concentrent uniquement sur le type Element.
1. Utilisez l'interface de base de DOM1 pour parcourir récursivement l'arborescence DOM
DOM1 fournit des API pour le type de base Node, via lesquelles certaines opérations de base du DOM peuvent être effectuées. Le code pour parcourir récursivement l'arborescence DOM est relativement simple. L'idée principale est de traiter d'abord le nœud actuel, puis de parcourir récursivement les nœuds enfants de gauche à droite :
.
/** * 使用递归的方式先序遍历DOM树 * @param node 根节点 */ function traversal(node){ //对node的处理 if(node && node.nodeType === 1){ console.log(node.tagName); } var i = 0, childNodes = node.childNodes,item; for(; i < childNodes.length ; i++){ item = childNodes[i]; if(item.nodeType === 1){ //递归先序遍历子节点 traversal(item); } } }
2. Utilisez l'interface de base de DOM1 pour parcourir de manière itérative l'arborescence DOM
Différent de la première méthode, cette fois une méthode itérative est utilisée pour parcourir l'arborescence DOM. L'utilisation de l'itération pour parcourir l'arborescence DOM est relativement compliquée.Le point clé est d'utiliser une pile pour conserver le chemin d'accès du nœud. Lorsque le nœud actuel est traité, le premier nœud enfant Element du nœud est d'abord utilisé comme nœud racine. du cycle suivant, et selon Pousser les autres nœuds d'éléments enfants du nœud actuel sur la pile dans l'ordre de droite à gauche. Si le nœud actuel n'a pas de nœud enfant Element, supprimez un nœud Element de la pile en tant que nœud racine du cycle suivant jusqu'à ce que le nœud racine ne puisse pas être obtenu. Le code est le suivant :
/** * 使用迭代的方式先序遍历DOM树 * @param node 根节点 */ function traversalIteration(node){ var array = [], i = 0,k = 0,elementCount = 0, len = 0, childNodes,item; while(node != null){ console.log(node.tagName); childNodes = node.childNodes; len = node.childNodes.length; elementCount = 0; if(len > 0){ for(i = 0; i < len; i++){ item = childNodes[i]; if(item.nodeType === 1){ elementCount++; node = item; break; } } for(k = len -1 ; k > i; k--){ item = childNodes[k]; if(item.nodeType == 1){ elementCount++; array.push(item); } } if(elementCount < 1){ node = array.pop(); } }else{ node = array.pop(); } } }
3. Utilisez l'API Element Traversal de l'extension DOM pour parcourir de manière récursive l'arborescence DOM
L'API DOMElement Traversal fournit plusieurs interfaces pour faciliter la traversée du DOM, facilitant ainsi l'obtention des nœuds enfants Element d'un nœud. Dans la section 2 de « Extension DOM : amélioration supplémentaire de l'API DOM [Résumé - Partie 1] », l'API Element Traversal de l'extension DOM est présentée. Le code est le suivant :
/** * 使用DOM扩展的Traversal API提供的新的接口先序遍历DOM树 * @param node 根节点 */ function traversalUsingTraversalAPI(node){ if(node && node.nodeType === 1){ console.log(node.tagName); } var i = 0,len = node.childElementCount, child = node.firstElementChild; for(; i < len ; i++){ traversalUsingTraversalAPI(child); child = child.nextElementSibling; } }
4. Utilisez NodeIterator
Le module "Traversal" de DOM2 fournit le type NodeIterator, qui peut être utilisé pour implémenter facilement un parcours de pré-commande de l'arborescence DOM. La section 12.3.1 de "JavaScript Advanced Programming, Third Edition" présente ce type. directement Le code est donné comme suit :
/** * 使用DOM2的"Traversal"模块提供的NodeIterator先序遍历DOM树 * @param node 根节点 */ function traversalUsingNodeIterator(node){ var iterator = document.createNodeIterator(node, NodeFilter.SHOW_ELEMENT,null,false); var node = iterator.nextNode(); while(node != null){ console.log(node.tagName); node = iterator.nextNode(); } }
5. Utilisez TreeWalker
Le type TreeWalker peut être considéré comme une version améliorée du type NodeIterator La section 12.3.2 de « JavaScript Advanced Programming, Third Edition » présente également directement le code ici comme suit :
/** * 使用DOM2的"Traversal"模块提供的TreeWalker先序遍历DOM树 * @param node 根节点 */ function traversalUsingTreeWalker(node){ var treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT,null,false); if(node && node.nodeType === 1){ console.log(node.tagName); } var node = treeWalker.nextNode(); while(node != null){ console.log(node.tagName); node = treeWalker.nextNode(); } }
Ce qui précède est la méthode javascript pour parcourir l'arborescence DOM afin de partager avec vous. J'espère que cela sera utile à l'apprentissage de chacun.

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...

La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...

Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.

Explorez la mise en œuvre de la fonction de glisser et de réglage du panneau de type VScode dans le frontal. Dans le développement frontal, comment implémenter un VScode comme ...
