Javascript: Làm thế nào để lặp qua TẤT CẢ các yếu tố DOM trên một trang?

Tôi đang cố gắng lặp lại TẤT CẢ các yếu tố trên một trang, vì vậy tôi muốn kiểm tra mọi yếu tố tồn tại trên trang này để tìm một lớp đặc biệt.

Vì vậy, làm thế nào để tôi nói rằng tôi muốn kiểm tra MỌI yếu tố?

Bạn có thể truyền a *để getElementsByTagName()nó sẽ trả về tất cả các thành phần trong một trang:

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

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

Lưu ý rằng bạn có thể sử dụng querySelectorAll(), nếu có sẵn (IE9 +, CSS trong IE8), để chỉ tìm các phần tử với một lớp cụ thể.

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

Điều này chắc chắn sẽ tăng tốc các vấn đề cho các trình duyệt hiện đại.

Các trình duyệt hiện hỗ trợ foreach trên NodeList . Điều này có nghĩa là bạn có thể trực tiếp lặp các phần tử thay vì viết vòng lặp của riêng bạn.

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

Lưu ý về hiệu suất - Làm hết sức mình để phạm vi những gì bạn đang tìm kiếm. Một bộ chọn phổ quát có thể trả về rất nhiều nút tùy thuộc vào độ phức tạp của trang. Ngay cả khi bạn cần xem qua mọi thứ mà ai đó có thể thấy, điều đó có nghĩa là bạn có thể sử dụng 'body *'làm công cụ chọn để cắt tất cả headnội dung.

Đã tìm kiếm cùng. Không hẳn là chính xác lắm. Tôi chỉ muốn liệt kê tất cả các Nút DOM.

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

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

Để có được các phần tử với một lớp cụ thể, chúng ta có thể sử dụng chức năng lọc.

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

Đã tìm thấy giải pháp trên MDN

Như mọi khi giải pháp tốt nhất là sử dụng đệ quy:

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

Không giống như các đề xuất khác, giải pháp này không yêu cầu bạn tạo một mảng cho tất cả các nút, vì vậy nó sẽ nhẹ hơn trên bộ nhớ. Quan trọng hơn, nó tìm thấy nhiều kết quả hơn. Tôi không chắc những kết quả đó là gì, nhưng khi thử nghiệm trên chrome, nó tìm thấy nhiều hơn 50% nút so vớidocument.getElementsByTagName("*");

Đây là một ví dụ khác về cách bạn có thể lặp qua một tài liệu hoặc một phần tử:

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

Dành cho những ai đang sử dụng Jquery

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

Andy E. đã đưa ra một câu trả lời tốt.

Tôi sẽ thêm, nếu bạn cảm thấy chọn tất cả các con trong một số bộ chọn đặc biệt (nhu cầu này xảy ra với tôi gần đây), bạn có thể áp dụng phương thức "getElementsByTagName ()" trên bất kỳ đối tượng DOM nào bạn muốn.

Ví dụ, tôi chỉ cần phân tích phần "trực quan" của trang web, vì vậy tôi chỉ thực hiện điều này

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

Điều này sẽ không bao giờ xem xét phần đầu.

từ liên kết này
tham khảo 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>

CẬP NHẬT: EDIT

kể từ câu trả lời cuối cùng của tôi, tôi đã tìm thấy giải pháp đơn giản hơn

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

    }

Sử dụng *

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

tôi nghĩ rằng điều này thực sự nhanh chóng

document.querySelectorAll('body,body *').forEach(function(e) {

Nhận tất cả các yếu tố bằng cách sử dụng var all = document.getElementsByTagName("*"); for (var i=0, max=all.length; i < max; i++);là ổn nếu bạn cần kiểm tra mọi yếu tố nhưng sẽ dẫn đến việc kiểm tra hoặc lặp lại các yếu tố hoặc văn bản lặp lại.

Dưới đây là một triển khai đệ quy kiểm tra hoặc lặp từng phần tử của tất cả các phần tử DOM chỉ một lần và chắp thêm:

(Tín dụng cho @George Reith cho câu trả lời đệ quy của anh ấy ở đây: Ánh xạ HTML sang JSON )

function mapDOMCheck(html_string, json) {
  treeObject = {}

  dom = new jsdom.JSDOM(html_string) // use jsdom because DOMParser does not provide client-side Window for element access
  document = dom.window.document
  element = document.querySelector('html')

  // Recurse and loop through DOM elements only once
  function treeHTML(element, object) {
    var nodeList = element.childNodes;

    if (nodeList != null) {
      if (nodeList.length) {
        object[element.nodeName] = []; // IMPT: empty [] array for parent node to push non-text recursivable elements (see below)

        for (var i = 0; i < nodeList.length; i++) {
          console.log("nodeName", nodeList[i].nodeName);

          if (nodeList[i].nodeType == 3) { // if child node is **final base-case** text node
            console.log("nodeValue", nodeList[i].nodeValue);
          } else { // else
            object[element.nodeName].push({}); // push {} into empty [] array where {} for recursivable elements
            treeHTML(nodeList[i], object[element.nodeName][object[element.nodeName].length - 1]);
          }
        }
      }
    }
  }

  treeHTML(element, treeObject);

}

Bạn có thể thử với document.getElementsByClassName('special_class');