Heim > Web-Frontend > js-Tutorial > JavaScripts Tiefen- und Breitendurchquerung von DOM-Knoten

JavaScripts Tiefen- und Breitendurchquerung von DOM-Knoten

青灯夜游
Freigeben: 2018-10-11 16:50:17
nach vorne
2603 Leute haben es durchsucht

Dieser Artikel stellt JavaScript in die Tiefen- und Breitendurchquerung von DOM-Knoten vor. Ich hoffe, dass er für Freunde hilfreich ist.

JavaScripts Tiefen- und Breitendurchquerung von DOM-Knoten

JavaScripts Tiefen- und Breitendurchquerung von DOM-Knoten

Die Baumstruktur von HTML ist wie oben

Depth-first Traversal

Depth- Zunächst sollte für die Baumdurchquerung das Ausführungsergebnis wie folgt aussehen:

JavaScripts Tiefen- und Breitendurchquerung von DOM-Knoten

Unter Verwendung der Rekursion
 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>Das Ergebnis ist wie folgt </p>
<p style="text-align: center;"><img src="https://img-blog.csdn.net/20180405023706585?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xYWTIyNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt=""></p>
<p>( Das Skript-Tag wird außerhalb des Körpers geschrieben, aber wenn es ausgeführt wird, fügt der Browser es in den Körper ein und wird zum letzten Element) <br></p>
<h5>Verwendung eines nicht rekursiven Methode</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)
Nach dem Login kopieren

Nicht rekursiv Übernehmen Sie hauptsächlich die Methode zur Simulation der Warteschlange:

JavaScripts Tiefen- und Breitendurchquerung von DOM-Knoten

und so weiter. Es ist zu beachten, dass die Schleife von i erforderlich ist Beginnen Sie von node.children.length-1 bis 0

Breite-zuerst-Durchquerung

Das Ergebnis der Breite-zuerst-Durchquerung des DOM-Baums sollte wie folgt sein

JavaScripts Tiefen- und Breitendurchquerung von DOM-Knoten

Rekursion verwenden
var stack=[bodyDom];//bodyDom是遍历的根节点
    function traversalBFSDOM (count) {
        count = count || 0;
        if (stack[count]) {
            var children = stack[count].children;
            for (let i = 0; i rrree<h5>Nichtrekursion verwenden Die Methode </h5><pre class="brush:php;toolbar:false">traversalBFSDOM(0)
Nach dem Login kopieren

verwendet hauptsächlich die First-In-First-Out-Idee, um die untergeordneten Knoten unter jedem Knoten nacheinander zu durchlaufen .

Die laufenden Ergebnisse sind wie folgt:

JavaScripts Tiefen- und Breitendurchquerung von DOM-Knoten

Lernen ist ein Prozess, lernen Sie, tiefgründig zu lernen

Zusammenfassung: Das Obige ist das Ganze Ich hoffe, dass der Inhalt dieses Artikels für das Studium aller hilfreich sein kann. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!

Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

JavaScript-Grafik-Tutorial

JavaScript Online-Handbuch

Das obige ist der detaillierte Inhalt vonJavaScripts Tiefen- und Breitendurchquerung von DOM-Knoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
js
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage