Javascript: jak zapętlić wszystkie elementy DOM na stronie?

Próbuję zapętlić wszystkie elementy na stronie, więc chcę sprawdzić każdy element, który istnieje na tej stronie dla specjalnej klasy.

Jak więc powiedzieć, że chcę sprawdzić każdy element?

Author: MysticMagicϡ, 2010-11-23
Source

9 answers

Możesz przekazać * do getElementsByTagName() tak, że zwróci wszystkie elementy na stronie: 

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

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

Zauważ, że możesz użyć querySelectorAll(), jeśli jest dostępna (IE9+, CSS w IE8), wystarczy znaleźć elementy z określoną klasą.

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

To z pewnością przyspieszyłoby sprawy w nowoczesnych przeglądarkach.

Przeglądarki obsługują teraz foreach na NodeList. Oznacza to, że możesz bezpośrednio zapętlić elementy zamiast pisać własną pętlę for.

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

Notatka o wydajności - zrób wszystko, co w twojej mocy, aby znaleźć to, czego szukasz. Uniwersalny selektor może zwrócić wiele węzłów w zależności od złożoności strony. Nawet jeśli musisz przejrzeć wszystko, co ktoś może zobaczyć, oznacza to, że możesz użyć 'body *' jako selektora, aby wyciąć całą zawartość head.

 178
Author: Andy E,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-05 21:35:56

Szukałam tego samego. Niezupełnie. Chciałem tylko wymienić wszystkie węzły DOM.

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

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

Aby uzyskać elementy z określoną klasą, możemy użyć funkcji filter.

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);
}

Znaleziono rozwiązanie na MDN

 23
Author: traditional,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-03 01:42:28

Oto kolejny przykład, jak można zapętlić dokument lub element: 

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;
}
 6
Author: Juggernogger93,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-12 13:31:46

Jak zawsze najlepszym rozwiązaniem jest użycie rekurencji: 

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]);
        }
    }

W przeciwieństwie do innych sugestii, To rozwiązanie nie wymaga tworzenia tablicy dla wszystkich węzłów, więc jego więcej światła na pamięci. Co ważniejsze, znajduje więcej wyników. Nie jestem pewien, jakie są te wyniki, ale podczas testów na chrome znajduje o 50% więcej węzłów w porównaniu do document.getElementsByTagName("*");

 5
Author: Ilya Gazman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-13 03:50:39

Dla tych, którzy używają Jquery 

$("*").each(function(i,e){console.log(i+' '+e)});
 4
Author: Matas Vaitkevicius,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-06 15:13:56

Z tego linku
javascript reference

<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>

UPDATE: EDIT

Od mojej ostatniej odpowiedzi znalazłem prostsze rozwiązanie 

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

    }
 2
Author: shareef,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-07 06:03:49

Andy E. dał dobrą odpowiedź.

Dodam, że jeśli masz ochotę wybrać wszystkie childy w jakimś specjalnym selektorze (ta potrzeba przydarzyła mi się ostatnio), możesz zastosować metodę "getElementsByTagName ()"na dowolnym obiekcie DOM.

Dla przykładu, musiałem po prostu przeanalizować "wizualną" część strony, więc zrobiłem to 

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

To nigdy nie weźmie pod uwagę części głowy.

 2
Author: korvus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-15 20:21:53

Możesz spróbować z document.getElementsByClassName('special_class');

 0
Author: Jimish Gamit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-12 04:00:14

Użyj * 

var allElem = document.getElementsByTagName("*");
for (var i = 0; i < allElem.lenght; i++) {
    // Do something with all element here
}
 0
Author: jacky wong,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-31 13:30:35