Wie kann ich ALLE DOM-Elemente auf einer Seite durchlaufen?

Question 1

Ich versuche, ALLE Elemente auf einer Seite zu durchlaufen, also möchte ich jedes Element, das auf dieser Seite existiert, auf eine spezielle Klasse überprüfen.

Wie sage ich also, dass ich JEDES Element überprüfen möchte?

Question 2

Sie können eine passieren * zu getElementsByTagName() damit es alle Elemente auf einer Seite zurückgibt:

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
     // Do something with the element here
}

Beachten Sie, dass Sie verwenden könnten querySelectorAll()falls verfügbar (IE9+, CSS in IE8), um nur Elemente mit einer bestimmten Klasse zu finden.

if (document.querySelectorAll)
    var clsElements = document.querySelectorAll(".mySpeshalClass");
else
    // loop through all elements instead

Dies würde die Sache für moderne Browser sicherlich beschleunigen.

Browser unterstützen jetzt foreach auf NodeList. Das bedeutet, dass Sie die Elemente direkt Schleifen können, anstatt eine eigene for-Schleife zu schreiben.

document.querySelectorAll('*').forEach(function(node) {
    // Do whatever you want with the node object.
});

Leistungshinweis – Geben Sie Ihr Bestes, um das Gesuchte einzugrenzen, indem Sie einen bestimmten Selektor verwenden. Ein universeller Selektor kann je nach Komplexität der Seite viele Knoten zurückgeben. Erwägen Sie auch die Verwendung document.body.querySelectorAll anstatt document.querySelectorAll wenn es dir egal ist <head> Kinder.

Question 3

Habe das gleiche gesucht. Nun, nicht genau. Ich wollte nur alle DOM Nodes auflisten.

var currentNode,
    ni = document.createNodeIterator(document.documentElement, NodeFilter.SHOW_ELEMENT);

while(currentNode = ni.nextNode()) {
    console.log(currentNode.nodeName);
}

Um Elemente mit einer bestimmten Klasse zu erhalten, können wir die Filterfunktion verwenden.

var currentNode,
    ni = document.createNodeIterator(
                     document.documentElement, 
                     NodeFilter.SHOW_ELEMENT,
                     function(node){
                         return node.classList.contains('toggleable') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
                     }
         );

while(currentNode = ni.nextNode()) {
    console.log(currentNode.nodeName);
}

Lösung gefunden auf
MDN

Question 4

Wie immer ist die beste Lösung die Verwendung der Rekursion:

loop(document);
function loop(node){
    // do some thing with the node here
    var nodes = node.childNodes;
    for (var i = 0; i <nodes.length; i++){
        if(!nodes[i]){
            continue;
        }

        if(nodes[i].childNodes.length > 0){
            loop(nodes[i]);
        }
    }
}

Im Gegensatz zu anderen Vorschlägen erfordert diese Lösung nicht, dass Sie ein Array für alle Knoten erstellen, sodass der Speicher weniger belastet wird. Noch wichtiger ist, dass mehr Ergebnisse gefunden werden. Ich bin mir nicht sicher, was diese Ergebnisse sind, aber beim Testen auf Chrome werden im Vergleich zu etwa 50 % mehr Knoten gefunden document.getElementsByTagName("*");

Question 5

Hier ist ein weiteres Beispiel, wie Sie ein Dokument oder ein Element durchlaufen können:

function getNodeList(elem){
var l=new Array(elem),c=1,ret=new Array();
//This first loop will loop until the count var is stable//
for(var r=0;r<c;r++){
    //This loop will loop thru the child element list//
    for(var z=0;z<l[r].childNodes.length;z++){

         //Push the element to the return array.
        ret.push(l[r].childNodes[z]);

        if(l[r].childNodes[z].childNodes[0]){
            l.push(l[r].childNodes[z]);c++;
        }//IF           
    }//FOR
}//FOR
return ret;
}

Question 6

Für diejenigen, die Jquery verwenden

$("*").each(function(i,e){console.log(i+' '+e)});

Question 7

Andy E. hat eine gute Antwort gegeben.

Ich würde hinzufügen, wenn Sie alle untergeordneten Elemente in einem speziellen Selektor auswählen möchten (dieses Bedürfnis ist mir kürzlich passiert), können Sie die Methode “getElementsByTagName()” auf jedes gewünschte DOM-Objekt anwenden.

Zum Beispiel musste ich nur den “visuellen” Teil der Webseite analysieren, also habe ich das gerade gemacht

var visualDomElts = document.body.getElementsByTagName('*');

Dabei wird der Kopfteil niemals berücksichtigt.

Question 8

von diesem Link
Javascript-Referenz

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function findhead1()
{
    var tag, tags;
    // or you can use var allElem=document.all; and loop on it
    tags = "The tags in the page are:"
    for(i = 0; i < document.all.length; i++)
    {
        tag = document.all(i).tagName;
        tags = tags + "\r" + tag;
    }
    document.write(tags);
}

//  -->
</script>
</head>
<body onload="findhead1()">
<h1>Heading One</h1>
</body>
</html>

AKTUALISIEREN: BEARBEITEN

seit meiner letzten antwort habe ich eine bessere einfachere lösung gefunden

function search(tableEvent)
    {
        clearResults()

        document.getElementById('loading').style.display = 'block';

        var params="formAction=SearchStocks";

        var elemArray = document.mainForm.elements;
        for (var i = 0; i < elemArray.length;i++)
        {
            var element = elemArray[i];

            var elementName= element.name;
            if(elementName=='formAction')
                continue;
            params += '&' + elementName+'='+ encodeURIComponent(element.value);

        }

        params += '&tableEvent=" + tableEvent;


        createXmlHttpObject();

        sendRequestPost(http_request,"Controller',false,params);

        prepareUpdateTableContents();//function js to handle the response out of scope for this question

    }