Traversée des nœuds DOM en profondeur et en largeur par JavaScript

Cet article présente JavaScript à la traversée en profondeur et en largeur des nœuds DOM. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La structure arborescente du HTML est la même que ci-dessus

Parcours en profondeur d'abord

Profondeur- d'abord pour l'arbre Traversal, le résultat de l'exécution doit être le suivant :

Utilisation de la récursivité

 var arr=[];
    //深度优先
    function traversalDFSDOM (rootDom) {
        if(!rootDom)return;
        if(rootDom.children.length==0){
            arr.push(rootDom)//没有孩子节点，表示是个叶子节点，将节点push到数组中
            return;
        }
        arr.push(rootDom)//非孩子节点，在每次遍历它的孩子节点之前先把它push到数组中
        for(var i=0;i<rootdom.children.length><p>Le résultat est le suivant </p>
<p style="text-align: center;"><img src="/static/imghw/default1.png" data-src="https://img-blog.csdn.net/20180405023706585?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xYWTIyNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" class="lazy" alt=""></p>
<p>(La balise de script est écrite en dehors du corps, mais une fois exécutée, le navigateur la placera dans le corps et deviendra le dernier élément)<br></p>
<h5 id="Utiliser-un-non-méthode-récursive">Utiliser un non -méthode récursive</h5>
<pre class="brush:php;toolbar:false"> //深度优先非递归
    function traversalDFSDOM(rootDom) {
        if(!rootDom)return;
        var stack=[]
        var node = rootDom;
        while(node!=null){
            arr.push(node);
            if(node.children.length>=0){
                for(let i=node.children.length-1;i>=0;i--)
                    stack.unshift(node.children[i]);
            }
            node = stack.shift()
        }
    }
    traversalDFSDOM(bodyDom)

La non-récursion adopte principalement le processus de simulation de files d'attente :

et ainsi de suite. je dois commencer de node.children.length-1 à 0

Parcours en largeur en premier

Le résultat du parcours en largeur en premier de l'arborescence DOM devrait être le suivant

Utiliser la récursion

var stack=[bodyDom];//bodyDom是遍历的根节点
    function traversalBFSDOM (count) {
        count = count || 0;
        if (stack[count]) {
            var children = stack[count].children;
            for (let i = 0; i  <pre class="brush:php;toolbar:false">traversalBFSDOM(0)

Utiliser une méthode non récursive

    function traversalBFSDOM (rootDom) {
        if(!rootDom)return;
        arr.push(rootDom)
        var queue = [rootDom];
        while(queue.length){
            var node = queue.shift();
            if(!node.children.length){
                continue;
            }
            for(var i=0;i<node.children.length><p>Utiliser principalement l'idée du premier entré, premier sorti pour parcourir les nœuds enfants sous chaque nœud dans l’ordre. </p>
<p>Les résultats en cours sont les suivants : </p>
<p style="text-align: center;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/297/941/277/1539247690616429.png" class="lazy" title="1539247690616429.png" alt="Traversée des nœuds DOM en profondeur et en largeur par JavaScript"    style="max-width:90%"  style="max-width:90%"></p>
<p>L'apprentissage est un processus, apprenez à apprendre en profondeur </p>
<p>Résumé : Ce qui précède est l'intégralité contenu de cet article, j’espère qu’il pourra être utile à l’étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le <a href="http://www.php.cn/course/list/17.html" target="_blank">Tutoriel vidéo JavaScript</a> ! </p>
<p>Recommandations associées : </p>
<p class="art_xg"><a href="http://www.php.cn/" target="_blank">Tutoriel vidéo de formation sur le bien-être public php</a></p>
<p><a href="http://www.php.cn/js-tutorial.html" target="_blank">Tutoriel graphique JavaScript</a></p>
<p><a href="http://www.php.cn/course/26.html" target="_blank">Manuel JavaScript en ligne</a></p></node.children.length>

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!