पुस्तकालयों का उपयोग किए बिना querySelectorAll उपलब्ध नहीं होने पर विशेषता द्वारा तत्व प्राप्त करें?

Question

<p data-foo="bar">

आप इसके बराबर कैसे कर सकते हैं

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

जहां querySelectorAll है उपलब्ध नहीं ?

मुझे एक देशी समाधान की आवश्यकता है जो कम से कम IE7 में काम करता है। मैं IE6 के बारे में परवाह नहीं है।

Comments

बाहर की जाँच sizzle.js जावास्क्रिप्ट चयनकर्ता पुस्तकालय

— युग

नाइस यस सिलेक्टिंग इज़ नॉट टू डू सॉट डेटा एट्रिब्यूट्स तो मैं कोशिश कर रहा था कि पैच को सबसे सरल तरीके से समझ सकूं, जैसे कि सिज़ल जैसे पूरे चयनकर्ता इंजन में खींचे बिना। लेकिन स्रोत में देखने के लिए अच्छा बिंदु। BTW एक और महान चयनकर्ता इंजन है github.com/ded/qwery

— ryanve

@ आर्यनवे, धन्यवाद मैं एक नज़र डालूँगा :)

— युग

मेरे द्वारा उपयोग किया जाने वाला कार्य समाधान github.com/ryanve/dope/blob/master/dope.js में 'queryAttr' नामक विधि में है

— ryanve

लोल, आपका सवाल मेरा जवाब है। इसलिए यह एक और सवाल है। वह किस स्थिति में querySelectorAllउपलब्ध नहीं है? note - I don't care all IE

— vzhen

Answer 1

आप एक फ़ंक्शन लिख सकते हैं जो getElementsByTagName ('*') चलाता है, और केवल "डेटा-फू" विशेषता के साथ उन तत्वों को लौटाता है:

function getAllElementsWithAttribute(attribute)
{
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++)
  {
    if (allElements[i].getAttribute(attribute) !== null)
    {
      // Element exists with attribute. Add to array.
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

फिर,

getAllElementsWithAttribute('data-foo');

Comments

उपयोग करना != nullआदर्श तरीका है (ऊपर मेरी टिप्पणी से बेहतर) क्योंकि पुराने IE में getAttribute के लिए एक मान वापस करना संभव है जिसका typeofहै'number'

— ryanve

के document.getElementsByTagName('*')बजाय का उपयोग क्यों document.all?

— pedrozath

hasAttributeइसके बजाय इसका उपयोग क्यों न करें getAttribute() !== null, क्योंकि आप केवल अस्तित्व की जांच करना चाहते हैं और इसके मूल्य की नहीं?

— rvighne

Answer 2

उपयोग

//find first element with "someAttr" attribute
document.querySelector('[someAttr]')

या

//find all elements with "someAttr" attribute
document.querySelectorAll('[someAttr]') 

तत्वों को खोजने के लिए विशेषता द्वारा। अब यह सभी प्रासंगिक ब्राउज़रों (यहां तक ​​कि IE8): http://caniuse.com/#search=queryselector में समर्थित है

Comments

जब प्रश्न स्पष्ट रूप से अनुरोध करता है तो इसमें इतने सारे बदलाव कैसे होते हैं: "मुझे एक मूल समाधान की आवश्यकता है जो कम से कम IE7 में काम करता है "। दूसरे, यह लिंक बताता है कि समर्थन IE11 में शुरू होता है, भले ही यह वास्तव में IE8 से शुरू होता है - शायद इसे डेवलपर. mozilla.org/en-US/docs/Web/API/Element/… पर स्वैप किया जाना चाहिए ताकि यह वास्तव में उत्तर का समर्थन करता है। ..?

— ज़ेज़े

सभी उत्क्षेपों का कारण, और कारण मैंने उत्तर दिया, यह है कि यह SO प्रश्न वास्तव में पुराना है, इसलिए जब आप खोजते हैं कि DOM तत्वों को कैसे खोजा जाए तो आपको यह परिणाम खोज परिणामों में बहुत अधिक मिलता है, और चूंकि यह लोग क्या हैं वे ऊपर की ओर देख रहे हैं। उपयोगिता> ऐतिहासिक सटीकता। दूसरी बात यह है कि यह लिंक अभी भी ठीक काम कर रहा है, बस यह है कि caniuse.com में पुराने ब्राउज़र छिपे हुए हैं, यदि आप "यूज़ रिलेटिव" पर स्विच करते हैं, तब भी आप पुराने ब्राउज़र देखेंगे।

— पाइलिनक्स

पूरी तरह से काम किया। त्वरित और सरल

— डॉसन बी

यह 2020 है। इसे अभी स्वीकार किया जाना चाहिए।

— नियरहस्करल

Answer 3

मैंने चारों ओर थोड़ा सा खेला और इस कच्चे समाधान के साथ समाप्त हुआ:

function getElementsByAttribute(attribute, context) {
  var nodeList = (context || document).getElementsByTagName('*');
  var nodeArray = [];
  var iterator = 0;
  var node = null;

  while (node = nodeList[iterator++]) {
    if (node.hasAttribute(attribute)) nodeArray.push(node);
  }

  return nodeArray;
}

उपयोग काफी सरल है, और IE8 में भी काम करता है:

getElementsByAttribute('data-foo');
// or with parentNode
getElementsByAttribute('data-foo', document);

http://fiddle.jshell.net/9xaxf6jr/

लेकिन मैं इसके लिए / (और पुराने ब्राउज़रों का समर्थन करने के लिए पॉलीफ़िल का उपयोग करने की सलाह देता हूं ):querySelectorAll

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

Comments

Aye, +1 querySelectorAll के लिए। एक त्वरित jsperf परीक्षण jsperf.com/custom-vs-selectorall-attributes दिखाता है कि यह स्वीकृत उत्तर की तुलना में बहुत तेज़ है ... दुर्भाग्य से यह IE 7 संगत नहीं है :(

— सेबस्टियन डैनियल

Answer 4

यह कोशिश करो यह काम करता है

document.querySelector ( '[गुण = "मूल्य"]')

उदाहरण :

document.querySelector('[role="button"]')

Answer 5

वह भी काम करता है:

document.querySelector([attribute="value"]);

इसलिए:

document.querySelector([data-foo="bar"]);

Comments

यह वास्तविक उद्धरण में एकल उद्धरण याद कर रहा है। होना चाहिए: document.querySelector('[data-foo="bar"]');

— ब्रेटिन जूल

Answer 6

इसे आज़माएं - मैंने उपरोक्त उत्तरों को थोड़ा बदल दिया है:

var getAttributes = function(attribute) {
    var allElements = document.getElementsByTagName('*'),
        allElementsLen = allElements.length,
        curElement,
        i,
        results = [];

    for(i = 0; i < allElementsLen; i += 1) {
        curElement = allElements[i];

        if(curElement.getAttribute(attribute)) {
            results.push(curElement);
        }
    }

    return results;
};

फिर,

getAttributes('data-foo');

Comments

आपने क्या बदला और क्यों?

— आर्टजोम बी।

Answer 7

जरूरत पड़ने पर मूल्य द्वारा विशेषता प्राप्त करने की अनुमति देने के लिए @kevinfahy के उत्तर पर थोड़ा संशोधन :

function getElementsByAttributeValue(attribute, value){
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++) {
    if (allElements[i].getAttribute(attribute) !== null) {
      if (!value || allElements[i].getAttribute(attribute) == value)
        matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

Answer 8

ब्राउज़र में उपयोग न करें

ब्राउज़र में, उपयोग करें document.querySelect('[attribute-name]')।

लेकिन अगर आप इकाई परीक्षण कर रहे हैं और आपके नकली डोम में एक परतदार क्वेरीसेलेर कार्यान्वयन है, तो यह चाल चलेगा।

यह @ kevinfahy का उत्तर है, बस ES6 वसा तीर के कार्यों के साथ थोड़ा सा हो सकता है और पठनीयता की कीमत पर HtmlCollection को एक सरणी में परिवर्तित करके।

तो यह केवल ES6 ट्रांसपिलर के साथ काम करेगा। इसके अलावा, मुझे यकीन नहीं है कि यह बहुत सारे तत्वों के साथ कैसा प्रदर्शन करेगा।

function getElementsWithAttribute(attribute) {
  return [].slice.call(document.getElementsByTagName('*'))
    .filter(elem => elem.getAttribute(attribute) !== null);
}

और यहां एक संस्करण है जो एक विशिष्ट मूल्य के साथ एक विशेषता प्राप्त करेगा

function getElementsWithAttributeValue(attribute, value) {
  return [].slice.call(document.getElementsByTagName('*'))
    .filter(elem => elem.getAttribute(attribute) === value);
}