JQuery का उपयोग किए बिना "डेटा-" विशेषता वाले सभी तत्वों का चयन करें

233

केवल जावास्क्रिप्ट का उपयोग करना, उन सभी DOM तत्वों का चयन करने का सबसे कुशल तरीका है जिनकी एक निश्चित data-विशेषता है (मान लीजिए data-foo)। तत्व अलग टैग तत्व हो सकते हैं।

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

javascript html dom

— DrANoel
स्रोत

ध्यान रखें कि document.querySelectorAllIE7 पर काम नहीं करता है। तुम एक वापस आने स्क्रिप्ट जो होगा बनाना होगा चलना प्रत्येक टैग में विशेषता के लिए डोम पेड़ और जाँच (वास्तव में मुझे पता नहीं कितनी तेजी से हो querySelectorAllरहा है, और टैग की पुस्तिका की जांच के लिए जाना होगा)।

— tereško

JQuery का उपयोग नहीं करने के लिए आपका क्या कारण है? यह इस तरह की स्थितियों में बहुत अधिक अपूरणीय है ...

— जेम्स हाय

@ फिर भी आप इन तत्वों को शुद्ध सीएसएस में भी नहीं चुन सकते।

— नं।

1

@JamesHay नहीं क्योंकि हर पर्यावरण, कंपनी, साइट, मानक कोडिंग, आपके पास क्या है, jQuery के उपयोग के लिए अनुमति देता है। jQuery अपूरणीय नहीं है।

— कार्निक्स

1

जो वास्तव में पर काम करता है मैं अभी भी न कोई जवाब देखने के विभिन्न data- : तत्वों, यानी data-foo=0और data-bar=1 और data-app="js" और data-date="20181231"

— एलेक्स

411

आप querySelectorAll का उपयोग कर सकते हैं :

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

— जो
स्रोत

8

बहुत बहुत धन्यवाद! अर्ध-संबंधित नोट: यदि आप नाम में एक कॉलन के साथ एक विशेषता का चयन करना चाहते हैं, तो आपको कोलोन (कम से कम क्रोम में) से बचने की आवश्यकता है जैसे: querySelectorAll ('[विशेषता \\: name]') (देखें): कोड देखें .google.com / p / क्रोमियम / मुद्दे / विस्तार? आईडी = 91637 )

— जेरेमी

243

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

आपको उस विशेषता के साथ सभी तत्व मिलेंगे।

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

केवल 1 के मान के साथ आपको प्राप्त करेंगे।

— जोसेफ मारिकले
स्रोत

आपके द्वारा प्राप्त किए गए तत्वों के लिए आप मान कैसे सेट कर सकते हैं?

— स्टीवन एगुइलर

@StevenAguilar .querySelectorAll()एक रिटर्न देता है NodeList। जैसा कि उस प्रलेखन में उल्लेख किया गया है, आप संग्रह का उपयोग करके पुनरावृति कर सकते हैं .forEach()। ध्यान दें कि यह एक गैर-IE समाधान है: developer.mozilla.org/en-US/docs/Web/API/… । यदि आपको IE का समर्थन करने की आवश्यकता है, तो आपको नियमित 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
स्रोत

2016 में अब तक मेरे लिए hasOwnProperty का उपयोग करना सबसे अच्छा जवाब है, यह पुनरावृत्ति के अन्य तरीकों के बारे में बहुत तेज़ है Mdn hasOwnProperty

— NVRM

QuerySelectorAll () से NodeList चलने योग्य है (हालांकि एक सरणी नहीं है)। for inलंबाई और आइटम गुणों पर पुनरावृति के साथ लूपिंग । इसके बजाय, for ofअधिक से अधिक पुनरावृत्त होने के लिए डिज़ाइन किए गए गुणों पर पुनरावृति करने के लिए उपयोग करें

— सोलविटेग

1

यहाँ एक दिलचस्प समाधान है: यह चयनकर्ता से मेल खाने वाले तत्वों के लिए एक डमी संपत्ति जोड़ने के लिए ब्राउज़र सीएसएस इंजन का उपयोग करता है और फिर मिलान किए गए तत्वों को खोजने के लिए गणना की गई शैली का मूल्यांकन करता है:

यह गतिशील रूप से एक शैली नियम बनाता है [...] फिर यह पूरे दस्तावेज़ को स्कैन करता है (बहुत कम और IE- विशिष्ट लेकिन बहुत तेज़ document.all का उपयोग करके) और प्रत्येक तत्वों के लिए गणना की गई शैली प्राप्त करता है। हम तब परिणामी वस्तु पर foo संपत्ति की तलाश करते हैं और जांचते हैं कि क्या यह "बार" के रूप में मूल्यांकन करता है। मेल खाने वाले प्रत्येक तत्व के लिए, हम एक सरणी में जोड़ते हैं।

— हेनरिक उलब्रिच
स्रोत

1

ठीक है, मैंने पुराने ब्राउज़रों के बारे में संकेत निकाल दिए हैं।

— हेनरिक उलब्रिच

बहुत बहुत धन्यवाद सर;) मुझे स्वीकार करना चाहिए कि मैंने 5 को नजरअंदाज कर दिया है

— हेनरिक अल्ब्रिच

टैग को याद करना आसान है। क्योंकि यह html5 है हम सभी document.querySelectorAll का सुझाव दे रहे हैं (और डेटा- * विशेषता html5 विशिष्ट है)।

— श्वेन्दुमास

-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 को नापसंद करता था।

— लोकतरंग

1

महंगे (पृष्ठ पर सभी तत्व), सरणी शाब्दिक अंकन (यानी []) का भी उपयोग करते हैं, और इसके शीर्ष पर, यह काम नहीं करता है। अपने लिए देखें -> jsbin.com/ipisul/edit#javascript,html

— shawndumas

2

हालाँकि, ओटीपी HTML 5 का उपयोग कर रहा है, getElementsByTagNameएक वैश्विक ( *) चयनकर्ता पुराने IE बिल्ड में टूट गया है। यह वह जगह है जहाँ एक पुनरावर्ती DOM खोज से काम हो जाता है। एक ElementNode पर कोई "डेटा-फू" गुण भी नहीं है जो data-fooविशेषता से मैप किया गया हो । आप देख रहे हैं dataset: वस्तु (यानी node.dataset.foo।

@shawndumas - यह प्रतीत होता है कि आप जो कुछ भी कर रहे थे वह PEBKAC था। jsfiddle.net/D798K/2 । यह काम करता हैं। अंत में, मैं इस उत्तर के लिए अपने आप को -1 चाहता हूँ - मैंने ओपी के सवाल में "सबसे कुशल" शब्दों को याद किया ...

— ब्रायन

@ ब्रायन - क्या jsbin.com/ipisul आपके लिए एक काम करता है ? क्योंकि आपका jsfiddle मेरी (वर्क-प्लेस

— डिमांड

-4

जबकि उतना सुंदर नहीं है querySelectorAll(जिसमें मुद्दों की लिटनी है), यहां एक बहुत ही लचीला कार्य है जो डोम को पुन: पेश करता है और उसे अधिकांश ब्राउज़रों (पुराने और नए) में काम करना चाहिए। जब तक ब्राउज़र आपकी स्थिति का समर्थन करता है (यानी: डेटा विशेषताएँ), आपको तत्व को पुनः प्राप्त करने में सक्षम होना चाहिए।

जिज्ञासु के लिए: jsPerf पर इस बनाम QSA के परीक्षण को परेशान न करें। ओपेरा 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

मुझे इन मुद्दों के बारे में सुनना भी अच्छा लगेगा।

— सीन_ए १

4

अब, हम कभी नहीं जान पाएंगे कि कौन सी लिटनी थी। एसओ से अनन्त रहस्यों के लिए एक और अध्याय

— ब्रासोफिलो

इसको नीचा दिखाना। यह पूरी तरह से खत्म हो गया कोडित है और साथ अनावश्यक querySelectorAllएपीआई

— dman