JQuery ব্যবহার না করে "ডেটা-" বৈশিষ্ট্যযুক্ত সমস্ত উপাদান নির্বাচন করুন

233

শুধুমাত্র জাভাস্ক্রিপ্ট ব্যবহার করে, একটি নির্দিষ্ট data-বৈশিষ্ট্যযুক্ত সমস্ত DOM উপাদান নির্বাচন করার সবচেয়ে কার্যকর উপায় কোনটি (আসুন বলি data-foo)। উপাদানগুলি বিভিন্ন ট্যাগ উপাদান হতে পারে।

<p data-foo="0"></p><br/><h6 data-foo="1"></h6>

javascript html dom

— DrANoel
সূত্র

document.querySelectorAllআই 7 এ কাজ করে না তা মনে রাখবেন । আপনাকে একটি ফ্যালব্যাক স্ক্রিপ্ট তৈরি করতে হবে যা ডিওএম গাছের উপর দিয়ে চলবে এবং প্রতিটি ট্যাগের অ্যাট্রিবিউটের জন্য যাচাই করবে (আসলে আমি জানি না কত দ্রুত querySelectorAllহয়, এবং ট্যাগগুলির ম্যানুয়াল চেক করতে পারি)।

— tereško

JQuery ব্যবহার না করার জন্য আপনার কারণ কী? এ জাতীয় পরিস্থিতিতে এটি বেশ অপূরণীয় ...

— জেমস হেই

@ হ্যাঁ মোটেই নয় আপনি খাঁটি CSS তেও এই উপাদানগুলি নির্বাচন করতে পারেন।

— নু

1

@ জেমসহে কারণ প্রতিটি পরিবেশ, সংস্থা, সাইট, কোডিং স্ট্যান্ডার্ড নয়, আপনার কাছে যা আছে, jQuery ব্যবহারের অনুমতি দেয়। jQuery অপরিবর্তনীয় নয়।

— কর্নিক্স

1

যে সত্যিই কাজ করে আমি এখনও আত কোনো উত্তর দেখার বিভিন্ন data- : উপাদান, অর্থাত data-foo=0এবং data-bar=1 এবং data-app="js" এবং data-date="20181231"

— অ্যালেক্স

411

আপনি ক্যোয়ারী নির্বাচনকারী সমস্ত ব্যবহার করতে পারেন :

document.querySelectorAll('[data-foo]');

— জো
সূত্র

8

পারফেক্ট, ধন্যবাদ! আধা-সম্পর্কিত নোট: আপনি যদি নামটিতে কোনও কোলনের সাথে একটি বৈশিষ্ট্য নির্বাচন করতে চান তবে আপনার কোলনটি (কমপক্ষে ক্রোমে অন্তর্ভুক্ত) এড়াতে হবে: ক্যোয়ারীস্লিটরএল ('[বৈশিষ্ট্য: নাম]') (দেখুন: কোড .google.com / পি / ক্রোমিয়াম / ইস্যু / বিস্তারিত? আইডি = 91637 )

— জেরেমি

243

document.querySelectorAll("[data-foo]")

আপনাকে সেই বৈশিষ্ট্য সহ সমস্ত উপাদান পেয়ে যাবে।

document.querySelectorAll("[data-foo='1']")

কেবলমাত্র 1 এর মান সহ আপনাকে পেয়ে যাবে।

— জোসেফ মেরিকলে
সূত্র

আপনি যে উপাদানগুলি পেয়েছেন তার জন্য কীভাবে মানগুলি সেট করতে পারেন?

— স্টিভেন আগুইলার

@StevenAguilar .querySelectorAll()একটি ফেরৎ NodeList। যে ডকুমেন্টেশনে উল্লিখিত হয়েছে, আপনি সংগ্রহ ব্যবহার করে পুনরাবৃত্তি করতে পারেন .forEach()। নোট করুন যে এটি একটি নন-আইই সমাধান: বিকাশকারী.মোজিলা.আর.ইন.ইউএস / ডকস / ওয়েবে / এপিআই / । আপনার যদি আইই সমর্থন করার প্রয়োজন হয় তবে আপনাকে নিয়মিত forলুপ ব্যবহার করে কেবল নোডলিস্টের উপরে লুপ করতে হবে।

— জোসেফ মেরিকলে

13

এখানে চেষ্টা করুন

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <p data-foo="0"></p>
            <h6 data-foo="1"></h6>
            <script>
                var a = document.querySelectorAll('[data-foo]');

                for (var i in a) if (a.hasOwnProperty(i)) {
                    alert(a[i].getAttribute('data-foo'));
                }
            </script>
        </body>
    </html>

— shawndumas
সূত্র

২০১O

— এনভিআরএম

ক্যোয়ারিলেক্টরআল () থেকে নোডলিস্ট পুনরাবৃত্ত হয় (যদিও অ্যারে নয়)। এর সাথে লুপিং for inদৈর্ঘ্য এবং আইটেমের বৈশিষ্ট্যগুলিতে পুনরাবৃত্তি হবে। পরিবর্তে, for ofপুনরাবৃত্ত হওয়ার জন্য ডিজাইন করা বৈশিষ্ট্যগুলির উপরে পুনরাবৃত্তি করতে ব্যবহার করুন

— সোলভিটিগ

1

এখানে একটি আকর্ষণীয় সমাধান: এটি নির্বাচকের সাথে মেলে এমন উপাদানগুলিতে একটি ডাম্পের সম্পত্তি যুক্ত করতে ব্রাউজারগুলির সিএসএস ইঞ্জিন ব্যবহার করে এবং তারপরে মিলিত উপাদানগুলি খুঁজে পাওয়ার জন্য গণিত শৈলীর মূল্যায়ন করে:

এটি গতিশীলভাবে একটি শৈলীর নিয়ম তৈরি করে [...] এটি পুরো ডকুমেন্টটি স্ক্যান করে (অনেকগুলি ডিক্রিড এবং আই-নির্দিষ্ট নির্দিষ্ট তবে খুব দ্রুত ডকুমেন্ট.এল ব্যবহার করে) এবং প্রতিটি উপাদানগুলির জন্য গণিত শৈলী পায়। তারপরে আমরা ফলস্বরূপ অবজেক্টের উপর foo সম্পত্তি অনুসন্ধান করি এবং এটি "বার" হিসাবে মূল্যায়ন করে কিনা তা পরীক্ষা করে দেখি। মেলে এমন প্রতিটি উপাদানগুলির জন্য, আমরা একটি অ্যারে যুক্ত করি।

— হেইনরিচ উলব্রিচ্ট
সূত্র

1

ঠিক আছে, আমি পুরানো ব্রাউজারগুলি সম্পর্কে ইঙ্গিতটি সরিয়েছি।

— হেইনরিচ উলব্রিচ্ট

আপনাকে অনেক ধন্যবাদ স্যার;) আমি অবশ্যই স্বীকার করে নেব যে আমি 5 টি উপেক্ষা করেছি

— হেইনরিচ উলব্রিচট

হ্যাঁ ট্যাগটি মিস করা সহজ। কারণ এটি এইচটিএমএল 5 হ'ল আমরা সকলেই ডকুমেন্ট.কোয়ারী নির্বাচনকারী সমস্ত প্রস্তাব করছি (এবং ডেটা- * বৈশিষ্ট্যটিও এইচটিএমএল 5 নির্দিষ্ট)।

— শানডুমাস

-1

var matches = new Array();

var allDom = document.getElementsByTagName("*");
for(var i =0; i < allDom.length; i++){
    var d = allDom[i];
    if(d["data-foo"] !== undefined) {
         matches.push(d);
    }
}

কে আমাকে -1 দিয়ে ডিনেজ করেছে তা নিশ্চিত নয়, তবে এখানে তার প্রমাণ রয়েছে।

http://jsfiddle.net/D798K/2/

— ব্রায়ান
সূত্র

3

আপনার বেশিরভাগই "সঠিক" সঠিক নয়। আমি নিশ্চিত যে কেউ আপনাকে -1 দিয়েছে কারণ উপাদানগুলি পেতে আপনার অতিরিক্ত কাজ করা এবং তারপরে সংগ্রহটি অ্যারেতে রেখেছেন। কারও কাছে কোনও ব্যাখ্যা না থাকলে আমি -১ টা অপছন্দ করি না।

— লোকটার

1

ব্যয়বহুল (পৃষ্ঠার সমস্ত উপাদান), অ্যারে আক্ষরিক স্বরলিপি (যেমন []] ব্যবহার করে এবং তার উপরে এটি কার্যকর হয় না। নিজের জন্য দেখুন -> jsbin.com/ipisul/edit#javascript,html

— শানডুমাস

2

যদিও ওপিতে যেভাবেই এইচটিএমএল 5 ব্যবহার করা হচ্ছে তবে getElementsByTagNameএকটি গ্লোবাল ( *) নির্বাচক পুরানো আইই বিল্ডগুলিতে ভেঙে গেছে। এখানেই একটি পুনরাবৃত্ত ডিওএম অনুসন্ধান কাজটি করে। এলিমেন্টনোডে কোনও "ডেটা-ফু" সম্পত্তিও নেই যা data-fooবৈশিষ্ট্য থেকে ম্যাপ করা হয়েছে । আপনি যা খুঁজছেন dataset: বস্তু (অর্থাত node.dataset.foo।

@ শাওনডুমাস - এটি হ'ল যা আপনারা পিবেকেএসি ছিলেন। jsfiddle.net/D798K/2 । এটা কাজ করে। শেষ পর্যন্ত, আমি যাইহোক যাইহোক এই উত্তরটির জন্য নিজেকে -1 করেছি - আমি ওপি-র প্রশ্নের "সবচেয়ে দক্ষ" শব্দটি মিস করেছি ...

— ব্রায়ান

@ ব্রায়ান - jsbin.com/ipisul আপনার জন্য একটি কাজ করে? আপনার জাসফিডালটি আমার (কাজের জায়গার দাবিতে) কাজ করছে না, কারণ 9 ...

— শানডুমাস

-4

যদিও হিসাবে সুন্দর না querySelectorAll এটির (যার মধ্যে ইস্যুগুলির লিটানি রয়েছে), এখানে একটি খুব নমনীয় ফাংশন রয়েছে যা ডিওএমকে পুনরাবৃত্তি করে এবং বেশিরভাগ ব্রাউজারে (পুরানো এবং নতুন) কাজ করা উচিত। যতক্ষণ না ব্রাউজার আপনার শর্তটি সমর্থন করে (যেমন: ডেটা অ্যাট্রিবিউটস), আপনার উপাদানটি পুনরুদ্ধার করতে সক্ষম হওয়া উচিত।

কৌতুহলকারীদের কাছে: জেএসফ্রুতে এই বনাম কিউএসএ পরীক্ষার বিরক্ত করবেন না। অপেরা 11 এর মতো ব্রাউজারগুলি ক্যোয়ারীটিকে ক্যাশে করবে এবং ফলাফলগুলি আঁকবে।

কোড:

function recurseDOM(start, whitelist)
{
    /*
    *    @start:        Node    -    Specifies point of entry for recursion
    *    @whitelist:    Object  -    Specifies permitted nodeTypes to collect
    */

    var i = 0, 
    startIsNode = !!start && !!start.nodeType, 
    startHasChildNodes = !!start.childNodes && !!start.childNodes.length,
    nodes, node, nodeHasChildNodes;
    if(startIsNode && startHasChildNodes)
    {       
        nodes = start.childNodes;
        for(i;i<nodes.length;i++)
        {
            node = nodes[i];
            nodeHasChildNodes = !!node.childNodes && !!node.childNodes.length;
            if(!whitelist || whitelist[node.nodeType])
            {
                //condition here
                if(!!node.dataset && !!node.dataset.foo)
                {
                    //handle results here
                }
                if(nodeHasChildNodes)
                {
                    recurseDOM(node, whitelist);
                }
            }
            node = null;
            nodeHasChildNodes = null;
        }
    }
}

তারপরে আপনি নিম্নলিখিতটি দিয়ে এটি সূচনা করতে পারেন:

recurseDOM(document.body, {"1": 1}); গতি জন্য, বা ঠিক recurseDOM(document.body);

আপনার স্পেসিফিকেশন সহ উদাহরণ: http://jsbin.com/unajot/1/edit

পৃথক পৃথককরণের উদাহরণ: http://jsbin.com/unajot/2/edit

23

ইস্যুতে লিটানি কী querySelectorAll?

— শ্রীভাতসার আর

9

আমি এই বিষয়গুলি সম্পর্কে শুনতেও পছন্দ করব।

— শন_এ91

4

এখন, আমরা কখনই জানতে পারব না যে কোন লিটানি ছিল। এসও থেকে চিরন্তন রহস্যগুলির জন্য আরও একটি অধ্যায়

— ব্রাসোফিলো

এই ডাউনভোটিং। এটি querySelectorAllএপিআই

— dman