DOM में एक तत्व का पता लगाएं जो एक विशेषता मान पर आधारित है

Question

क्या आप मुझे बता सकते हैं कि कोई डोम एपीआई है जो दिए गए विशेषता नाम और विशेषता मान वाले किसी तत्व की खोज करता है:

कुछ इस तरह:

doc.findElementByAttribute("myAttribute", "aValue");

Comments

डुप्लिकेट यदि आप एक जेकरी सोल की तलाश कर रहे हैं: stackoverflow.com/questions/696968/…

— रजत

क्या आप कृपया आधुनिक समाधान, Wojtek के उत्तर के स्वीकृत उत्तर को अपडेट कर सकते हैं?

— निक Craver

Answer 1

अद्यतन: पिछले कुछ वर्षों में परिदृश्य काफी बदल गया है। अब आप मज़बूती से उपयोग कर सकते हैं querySelectorऔर querySelectorAll, ऐसा करने के लिए Wojtek का जवाब देखें ।

अब एक jQuery निर्भरता के लिए कोई ज़रूरत नहीं है। यदि आप jQuery का उपयोग कर रहे हैं, तो महान ... यदि आप नहीं हैं, तो आपको अब केवल विशेषताओं द्वारा तत्वों का चयन करने के लिए इस पर भरोसा करने की आवश्यकता नहीं है।

---

वेनिला जावास्क्रिप्ट में ऐसा करने का बहुत छोटा तरीका नहीं है, लेकिन कुछ समाधान उपलब्ध हैं।

आप ऐसा कुछ करते हैं, तत्वों के माध्यम से लूपिंग और विशेषता की जांच करते हैं

यदि jQuery जैसी लाइब्रेरी एक विकल्प है, तो आप इसे इस तरह से थोड़ा आसान कर सकते हैं:

$("[myAttribute=value]")

यदि मान एक वैध सीएसएस पहचानकर्ता नहीं है (इसमें स्थान या विराम चिह्न है, आदि), तो आपको मूल्य के चारों ओर उद्धरण की आवश्यकता है (वे एकल या दोहरे हो सकते हैं):

$("[myAttribute='my value']")

आप यह भी कर सकते हैं start-with, ends-with, contains, आदि ... वहाँ विशेषता चयनकर्ता के लिए कई विकल्प हैं ।

Comments

वास्तव में वेनिला जावास्क्रिप्ट डोम एपीआई आधुनिक ब्राउज़रों पर बहुत अच्छी तरह से काम करता है

— वोजटेक क्रुज़ेव्स्की

@WojtekKruszewski 2010 में नहीं :) मैंने हालांकि अपडेट किया था, उम्मीद है कि पूछने वाला हमारे लिए स्वीकृति को आगे बढ़ाएगा - हम वर्तमान जानकारी चाहते हैं।

— निक Craver

मुझे लगता है कि jQuery (या समतुल्य) शायद सबसे आसान है विशेष रूप से क्रॉस ब्राउज़र संगत होना बिना यह जानने के लिए कि इसकी आवश्यकता क्या है।

— एलेक्सिस विलके

मुझे खाली सरणी मिलती रहती है! मैं d विशेषता द्वारा SVG हड़पने की कोशिश कर रहा हूँ, और मैं $ ("[d = path]") कोशिश कर रहा हूँ; जहाँ 'पाथ' एक वैरिएबल है जिसमें विशिष्ट d- विशेषता है जिसकी मुझे आवश्यकता है। किसी ने svg रास्तों के साथ ऐसा करने की कोशिश की है?

— tx291

Answer 2

आधुनिक ब्राउज़र देशी का समर्थन करते हैं querySelectorAllताकि आप कर सकें:

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

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

ब्राउज़र संगतता के बारे में विवरण:

• http://quirksmode.org/dom/core/#t14
• http://caniuse.com/queryselector

अप्रचलित ब्राउज़रों (IE9 और पुराने) का समर्थन करने के लिए आप jQuery का उपयोग कर सकते हैं:

$('[data-foo="value"]');

Comments

"आधुनिक" परिभाषा को समझने के लिए

— serhio

ऐसा लगता है कि मूल्य एक नंबर या नहीं किया जा सकताSyntaxError: An invalid or illegal string was specified

— jeum

चयनकर्ता होना चाहिए:'[data-foo="value"]'

— Yotam Omer

Perfomance के बारे में कोई नोट? यह तेजी से तो सभी नोड्स पर पुनरावृत्ति है?

— Stepan Yakovenko

"डेटा-फू" क्या है ... और इस उदाहरण में 'MyAttribute' कहाँ गया है?

— oo_dev

Answer 3

हम डोम document.querySelector()और document.querySelectorAll()विधियों का उपयोग करके विशेषता चयनकर्ता का उपयोग कर सकते हैं ।

आपके लिये:

document.querySelector("selector[myAttribute='aValue']");

और उपयोग करके querySlectorAll():

document.querySelectorAll("selector[myAttribute='aValue']");

में querySelector()और querySelectorAll()तरीकों हम वस्तुओं के रूप में हम "CSS" में चयन चुन सकते हैं।

Https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors में "CSS" विशेषता चयनकर्ताओं के बारे में अधिक जानकारी

Comments

मुझे इस दस्तावेज़ की तरह आंतरिक उद्धरण चिह्नों को हटाना पड़ा ।querySelectorAll ("चयनकर्ता [myAttribute = aValue]");

— मटज़ाज हिर्समैन

Answer 4

FindByAttributeValue("Attribute-Name", "Attribute-Value");   

ps यदि आप सटीक तत्व-प्रकार जानते हैं, तो आप तीसरा पैरामीटर जोड़ते हैं (यानी div, a, p ...etc...):

FindByAttributeValue("Attribute-Name", "Attribute-Value", "div");   

लेकिन सबसे पहले, इस फ़ंक्शन को परिभाषित करें:

function FindByAttributeValue(attribute, value, element_type)    {
  element_type = element_type || "*";
  var All = document.getElementsByTagName(element_type);
  for (var i = 0; i < All.length; i++)       {
    if (All[i].getAttribute(attribute) == value) { return All[i]; }
  }
}

पीएस प्रति टिप्पणियों की सिफारिशों को अपडेट किया गया।

Comments

क्यों ?! आप ऐसा करके अपने सारे DOM को

— Arthur

यह बहुत अच्छा लगता है - यदि आपके पास पृष्ठ पर केवल 5 तत्व हैं।

— शेरिफडेरेक

document.querySelectorAll('[data-foo="value"]');के रूप में @Wojtek Kruszewski द्वारा प्रस्तावित awnser पर प्रस्तावित है।

— आर्थर

Answer 5

यहाँ एक उदाहरण है, src विशेषता द्वारा किसी दस्तावेज़ में चित्र कैसे खोजें:

document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");

Answer 6

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

 var p = document.getElementById("p");
 var alignP = p.getAttribute("align");

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

Comments

वह pबिना डोम idया p(और परीक्षण विशेषताओं के) का उपयोग किए बिना तत्व का चयन करना चाहता है

— आर्थर

Answer 7

क्वेरी चयनकर्ताओं का उपयोग करें, उदाहरण:

document.querySelectorAll(' input[name], [id|=view], [class~=button] ')

input[name]nameसंपत्ति वाले तत्व ।

[id|=view]आईडी वाले तत्व जिनके साथ शुरू होता है view-।

[class~=button]buttonकक्षा के साथ तत्व ।