জাভাস্ক্রিপ্ট: একটি পৃষ্ঠায় সমস্ত ডোম উপাদান দিয়ে লুপ কিভাবে?

Question

আমি একটি পৃষ্ঠায় সমস্ত উপাদান লুপ করার চেষ্টা করছি, তাই আমি এই পৃষ্ঠায় বিদ্যমান প্রতিটি উপাদান একটি বিশেষ শ্রেণীর জন্য পরীক্ষা করতে চাই।

সুতরাং, আমি কীভাবে বলব যে আমি প্রতিটি উপাদান চেক করতে চাই?

Comments

আপনি কি প্রতিটি উপাদান নিজেই লুপ করতে চান? নির্দিষ্ট শ্রেণির উপাদানগুলি দখল করতে কেন jquery এবং নির্বাচক ব্যবহার করবেন না?

— এনজি।

সেখানে কোন ডকুমেন্ট নেই? উইজেট এলিমেন্টস বাই টাইগনেম পদ্ধতি?

— সুপারজেডি 224

* টিএল; ডিআর: কেবলমাত্র দৃশ্যমান উপাদানগুলির জন্য, ব্যবহার করুন:document.body.getElementsByTagName('*')

— অ্যান্ড্রু

এর সাথে আইট্রেট করুন:for (... of ...) { }

— অ্যান্ড্রু

Answer 1

আপনি এতে পাস *করতে getElementsByTagName()পারেন যাতে এটি কোনও পৃষ্ঠার সমস্ত উপাদানকে ফিরিয়ে দেয়:

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

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

মনে রাখবেন যে querySelectorAll()সুনির্দিষ্ট শ্রেণীর উপাদান খুঁজে পাওয়ার জন্য এটি (আই 9 +, আইই 8-তে সিএসএস) পাওয়া গেলে আপনি ব্যবহার করতে পারেন ।

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

এটি অবশ্যই আধুনিক ব্রাউজারগুলির জন্য বিষয়গুলির গতি বাড়িয়ে তুলবে।

---

ব্রাউজারগুলি এখন নোডলিস্টে ফোরচ সমর্থন করে । এর অর্থ আপনি লুপের জন্য নিজের লেখার পরিবর্তে উপাদানগুলি সরাসরি লুপ করতে পারেন।

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

পারফরম্যান্স নোট - আপনি যা খুঁজছেন তা সুযোগের জন্য যথাসাধ্য চেষ্টা করুন। একটি সার্বজনীন নির্বাচক পৃষ্ঠার জটিলতার উপর নির্ভর করে প্রচুর নোড ফিরিয়ে দিতে পারে। এমনকি আপনার যদি কেউ দেখতে পান এমন সমস্ত কিছু দেখার প্রয়োজন হয় তবে এর অর্থ আপনি 'body *'সমস্ত headবিষয়বস্তু কেটে ফেলার জন্য নির্বাচক হিসাবে ব্যবহার করতে পারেন ।

Comments

এই পদ্ধতিটি খুব সুন্দর বলে মনে হচ্ছে, তবে আমি কীভাবে উচ্চতর পদ্ধতিতে একটি উপাদান নির্বাচন করতে পারি? আমি কেবল 'আমি' সূচক পেয়েছি?

— ফ্লোরিয়ান মুলার

@ ফ্লোরিয়ান: ঠিক যেমন আপনি কোনও অ্যারে উপাদান অ্যাক্সেস করতে চান - all[i]আপনাকে বর্তমান উপাদান দেবে।

— অ্যান্ডি ই

লুপের পাশের উপাদানটি কীভাবে নির্বাচন করবেন?

— দেবিপ্রসাদ

@ জেসিএলড্রিজ: অভ্যাস / ভাল অনুশীলনের মাত্রা। প্রতিটি পুনরাবৃত্তিতে সম্পত্তি অনুসন্ধান এড়ানো সাধারণত একটি মাইক্রো-অপ্টিমাইজেশন হয় তবে এটি লেখার পক্ষে আরও বেশি কঠিন নয় এবং তাই আমি কেবল প্রাকৃতিকভাবেই এটি করি।

— অ্যান্ডি ই

@ জোনাথনের getElementsByClassName()চেয়ে খারাপ সমর্থন রয়েছে querySelectorAll()(পূর্ববর্তী আইই 8 তে সমর্থিত নয়)। ওপি স্পষ্টভাবে জানিয়েছে যে তিনি একটি পৃষ্ঠায় সমস্ত উপাদানকে লুপ করতে চান , যার জন্য আমি তাকে সমাধান দিয়েছি এবং বিকল্প প্রস্তাব দিয়েছি। আমি নিশ্চিত না যে সমস্যাটি কী ;-)।

— অ্যান্ডি ই

Answer 2

একই খুঁজছিলেন। ঠিক আছে, ঠিক না। আমি কেবল সমস্ত ডিওএম নোডের তালিকা করতে চেয়েছি।

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

এমডিএন- তে সমাধান পাওয়া গেছে

Comments

ডকুমেন্ট.সিয়েটনোডিট্রেটর কখনও দেখেনি। জেএস কী নতুন বৈশিষ্ট্য নিয়ে আসে আকর্ষণীয় বলে মনে হচ্ছে;)

— ফ্লোরিয়ান মুলার

এর একটি দুর্দান্ত বৈশিষ্ট্য হ'ল নোডিট্রেটর নোডগুলি যেভাবে এইচটিএমএল এ প্রদর্শিত হয় সেভাবে সেগুলিও হাঁটা করে। আমি অবাক হই যে, যদি কেউ document.body.getElementsByTagName('*')স্ক্র্যাম্বলড ক্রমে নোডগুলি ফিরিয়ে দিতে পারে।

— নাগরিক

বাহ এটা আসলে ভাল সমর্থিত!

— রজারডপ্যাক

Answer 3

সর্বদা হিসাবে পুনরাবৃত্তিটি ব্যবহার করা সবচেয়ে ভাল সমাধান:

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("*");

Comments

পুনরাবৃত্তি ব্যবহারের সর্বোত্তম সময়টি পুনরাবৃত্তি ব্যবহারের জন্য সেরা সময়।

— অ্যাডামলাইভ

"এটি তুলনায় প্রায় 50% আরও নোডের সন্ধান পেয়েছে document.getElementsByTagName("*");" - হ্যাঁ, এটি পাঠ্য নোড এবং মন্তব্য নোডের পাশাপাশি উপাদান নোডগুলি খুঁজে পাবে । ওপি যেমন উপাদানগুলির বিষয়ে জিজ্ঞাসা করছিল, এটি অপ্রয়োজনীয়।

— পল ডি ওয়েট

এটি স্মৃতিশক্তি হালকা হতে পারে। প্রতিটি স্তরের পুনরাবৃত্তিতে আপনি কতটা করেন তার উপর নির্ভর করে আপনি নীচে পৌঁছানোর সময় আপনি একটি শক্তিশালী বড় কল স্ট্যাক তৈরি করতে পারেন। একটি NodeListকেবল Nodeআপনার ডিওমে অন্তর্নির্মিত সেগুলি উল্লেখ করছে , সুতরাং এটি আপনার কল্পনা করার মতো ভারী নয়। যে কেউ বেশি জানেন সে ওজন করতে পারে তবে আমি মনে করি এটি কেবল একটি মেমরি রেফারেন্স আকার, তাই নোডের জন্য 8 বাইট।

— জোশ কেরিবউ

Answer 4

আপনি কীভাবে কোনও দস্তাবেজ বা কোনও উপাদান দিয়ে লুপ করতে পারেন সে সম্পর্কে এখানে আরও একটি উদাহরণ রয়েছে:

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

Answer 5

যারা Jquery ব্যবহার করছেন তাদের জন্য

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

Answer 6

অ্যান্ডি ই একটি ভাল উত্তর দিয়েছেন।

আমি যোগ করব, যদি আপনি কিছু বিশেষ নির্বাচক (সমস্ত ক্ষেত্রে আমার কাছে এই প্রয়োজনটি ঘটেছিল) বাছাই করতে চান তবে আপনি যে কোনও ডিওএম অবজেক্টে "getElementsByTagName ()" পদ্ধতি প্রয়োগ করতে পারেন।

উদাহরণস্বরূপ, আমার ওয়েব পৃষ্ঠার "ভিজ্যুয়াল" অংশটি কেবল পার্স করা দরকার, তাই আমি এটি তৈরি করেছি

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

এটি কখনই মাথার অংশটি বিবেচনায় নেবে না।

Comments

অসাধারণ! । । ।

— অ্যান্ড্রু

Answer 7

এই লিঙ্কটি
জাভাস্ক্রিপ্ট রেফারেন্স থেকে

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

আপডেট: সম্পাদন

আমার শেষ উত্তর থেকে আমি আরও সহজ সমাধান খুঁজে পেয়েছি

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

    }

Comments

এই SO আলোচনা অনুযায়ী , document.allপক্ষে অনুপ্রাণিত হয় document.getElementBy*।

— thejoshwolfe

@ তেজোশওলফ ধন্যবাদ আমার আপডেট হওয়া আমার সন্ড সলিউশন সম্পর্কে আপনি কী ভাবেন

— শরীফ

Answer 8

ব্যবহার *

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

Answer 9

আমি মনে করি এটি সত্যিই দ্রুত

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

Answer 10

var all = document.getElementsByTagName("*"); for (var i=0, max=all.length; i < max; i++);আপনার যদি প্রতিটি উপাদান পরীক্ষা করতে হয় তবে সমস্ত উপাদান ব্যবহার করে ঠিক আছে তবে পুনরাবৃত্তিকারী উপাদান বা পাঠ্যটি চেক করা বা লুপ করতে হবে।

নীচে একটি পুনরাবৃত্তি বাস্তবায়ন যা সমস্ত ডম উপাদানগুলির প্রতিটি উপাদান একবারে একবারে পরীক্ষা করে এবং লুপ করে এবং যুক্ত করে:

(এখানে তার পুনরাবৃত্ত উত্তরের জন্য ক্রেডিটস জর্জ জোথ: জেএসএনে মানচিত্র এইচটিএমএল )

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

}

Answer 11

আপনি চেষ্টা করতে পারেন document.getElementsByClassName('special_class');

Comments

সঠিক পদ্ধতিটি getElementsByClassName()এটি 9

— অ্যান্ডি ই