Javascript: Как перемещаться по всем элементам DOM на странице?

Я пытаюсь перебрать все элементы на странице, поэтому я хочу проверить каждый элемент, который существует на этой странице для специального класса.

Итак, как я могу сказать, что хочу проверить КАЖДЫЙ элемент?

Ответ 1

Вы можете передать * в getElementsByTagName(), чтобы он возвращал все элементы на странице:

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

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

Обратите внимание, что вы можете использовать querySelectorAll(), если он доступен (IE9 +, CSS в IE8), чтобы просто найти элементы с определенным классом.

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

Это, безусловно, ускорит вопросы для современных браузеров.

Браузеры теперь поддерживают foreach в NodeList. Это означает, что вы можете напрямую зацикливать элементы вместо написания собственного цикла for.

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

Заметка о производительности. Сделайте все возможное, чтобы найти то, что вы ищете. Универсальный селектор может возвращать много узлов в зависимости от сложности страницы. Даже если вам нужно просмотреть все, что может увидеть кто-то, это означает, что вы можете использовать 'body *' в качестве селектора, чтобы вырезать все содержимое head.

Ответ 2

Ищет то же самое. Ну, не совсем. Я только хотел перечислить все узлы DOM.

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

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

Чтобы получить элементы с определенным классом, мы можем использовать функцию фильтра.

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

Найдено решение по MDN

Ответ 3

Вот еще один пример того, как вы можете прокручивать документ или элемент:

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

Ответ 4

Как всегда лучшим решением является использование рекурсии:

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

В отличие от других предложений, это решение не требует, чтобы вы создавали массив для всех узлов, поэтому он больше освещает память. Что еще более важно, он находит больше результатов. Я не уверен, каковы эти результаты, но при тестировании на хром он обнаруживает на 50% больше узлов по сравнению с document.getElementsByTagName("*");

Ответ 5

Для тех, кто использует JQuery

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

Ответ 6

из этой ссылки
ссылка на javascript

<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

так как мой последний ответ я нашел более простым решением

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

    }

Ответ 7

Энди Э. дал хороший ответ.

Я бы добавил, если вы захотите выбрать все дочерние элементы в каком-то специальном селекторе (эта необходимость произошла со мной в последнее время), вы можете применить метод "getElementsByTagName()" к любому объекту DOM, который вы хотите.

В качестве примера мне нужно было просто проанализировать "визуальную" часть веб-страницы, поэтому я просто сделал это

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

Это никогда не будет учитывать головную часть.

Ответ 8

Вы можете попробовать document.getElementsByClassName('special_class');

Ответ 9

Используйте *

var allElem = document.getElementsByTagName("*");
for (var i = 0; i < allElem.length; i++) {
    // Do something with all element here
}

Ответ 10

hasClass:

function hasClass(element, className) {
  return (element.className).indexOf(className) > -1;
}

containsClass:

function containsClass(element, className) {
  return Array.from(element.classList).filter(function (cls) {
    return cls.indexOf(className) > -1;
  }).length > 0;
}

демонстрационный код