javascript - एक विशेषता मूल्य के आधार पर डीओएम में एक तत्व खोजें




dom (6)

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

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

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

कुछ इस तरह:

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

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

आपके लिये:

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

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

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

querySelector() और querySelectorAll() विधियों में हम ऑब्जेक्ट्स का चयन कर सकते हैं जैसा कि हम "सीएसएस" में चुनते हैं।

\' यहां से बचने वाले चरित्र का प्रतिनिधित्व करते हैं और अंततः "सीएसएस" में selector[myAttrubute = aValue] प्रतिनिधित्व करते हैं।

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


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

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

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

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

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

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

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

पीएस अगर आप सटीक तत्व-प्रकार जानते हैं, तो आप तीसरा पैरामीटर जोड़ते हैं (यानी 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]; }
  }
}

पीएस प्रति टिप्पणी सिफारिशों अद्यतन।


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

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

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

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

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

$("[myAttribute=value]")

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

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

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


अच्छा समाधान! सहायक कार्यों की मेरी लाइब्रेरी में शामिल है, अब यह इस तरह दिखता है:

Object.isDate = function(obj) {
/// <summary>
/// Determines if the passed object is an instance of Date.
/// </summary>
/// <param name="obj">The object to test.</param>

    return Object.prototype.toString.call(obj) === '[object Date]';
}

Object.isValidDate = function(obj) {
/// <summary>
/// Determines if the passed object is a Date object, containing an actual date.
/// </summary>
/// <param name="obj">The object to test.</param>

    return Object.isDate(obj) && !isNaN(obj.getTime());
}




javascript dom