querySelector, वाइल्डकार्ड तत्व मैच?

Question

वहाँ एक वाइल्डकार्ड तत्व नाम मैच का उपयोग करने का एक तरीका है querySelectorया querySelectorAll? मैं विशेषता प्रश्नों में वाइल्डकार्ड के लिए समर्थन देख रहा हूं लेकिन स्वयं तत्वों के लिए नहीं।

XML दस्तावेज़ मैं पार्स करने की कोशिश कर रहा हूं, मूल रूप से गुणों की एक फ्लैट सूची है और मुझे उन तत्वों को खोजने की आवश्यकता है जिनके नाम में कुछ तार हैं।

मुझे लगता है कि XML दस्तावेज़ को शायद एक पुनर्गठन की आवश्यकता है अगर मुझे इसकी आवश्यकता है लेकिन यह बस होने वाला नहीं है।

जाहिरा तौर पर पदावनत XPath (IE9 इसे गिरा दिया) का उपयोग करने के लिए वापस जाने के अलावा कोई भी समाधान स्वीकार्य है।

Comments

"नाम" से आपका मतलब टैग नाम है?

— kennytm

@ JaredMcAteer का उत्तर एक उत्तर के रूप में स्वीकार किए जाने के योग्य है। कृपया ध्यान रखें।

— RBT

Answer 1

[id^='someId']के साथ शुरू होने वाली सभी आईडी से मेल खाएगा someId।

[id$='someId']के साथ समाप्त होने वाली सभी आईडी से मेल खाएगा someId।

[id*='someId']सभी आईडी युक्त मेल करेगा someId।

यदि आप nameविशेषता के लिए देख रहे हैं तो बस के idसाथ स्थानापन्न name।

यदि आप उस तत्व के टैग नाम के बारे में बात कर रहे हैं जो मुझे विश्वास नहीं है कि उपयोग करने का एक तरीका है querySelector

Comments

धन्यवाद, मेरा मतलब टैग नाम था।

— एरिक एंडरसन

हम्म मैं डॉक्यूमेंट नहीं कर सकता हूं।

— प्रश्नकर्ताइंटरऑलर

वहाँ की अवधि शायद इसे document.querySelectorAll("div[id$='foo']")IE8 में गड़बड़ कर रही है केवल आंशिक QSA समर्थन है, मुझे लगता है कि वे केवल CSS2.1 चयनकर्ताओं का समर्थन करते हैं, इसलिए ये चयनकर्ता IE8 में काम नहीं करेंगे, लेकिन IE9 + काम करेंगे।

— JaredMcAteer

इस जवाब ने मेरी जान बचाई! धन्यवाद!!

— मेन्स

Answer 2

मैं क्वेरी-सिलेक्टर () को सम्‍मिलित करने वाले वन-लाइनर्स पर गड़बड़ कर रहा था / समाप्त कर रहा था, और मेरे नाम का जवाब देने के लिए @JaredMcAteer को क्रेडिट के साथ टैग नामों और querySelector () का उपयोग करके ओपी प्रश्न का एक संभावित उत्तर है, उर्फ ​​के पास RegEx जैसा है वेनिला जावास्क्रिप्ट में querySelector () के साथ मेल खाता है

निम्नलिखित उम्मीद करना उपयोगी होगा और ओपी की जरूरतों या अन्य सभी के लिए उपयुक्त होगा:

// basically, of before:
var youtubeDiv = document.querySelector('iframe[src="http://www.youtube.com/embed/Jk5lTqQzoKA"]')

// after     
var youtubeDiv = document.querySelector('iframe[src^="http://www.youtube.com"]');
// or even, for my needs
var youtubeDiv = document.querySelector('iframe[src*="youtube"]');

फिर, हम, उदाहरण के लिए, src सामान प्राप्त कर सकते हैं, आदि ...

console.log(youtubeDiv.src);
//> "http://www.youtube.com/embed/Jk5lTqQzoKA"
console.debug(youtubeDiv);
//> (...)

Answer 3

एक स्पष्ट विशेषता के रूप में टैगनाम सेट करें:

for(var i=0,els=document.querySelectorAll('*'); i<els.length;
          els[i].setAttribute('tagName',els[i++].tagName) );

मुझे स्वयं इसकी आवश्यकता थी, XML दस्तावेज़ के लिए, नेस्टेड टैग समाप्त होने के साथ _Sequence। देखें JaredMcAteer अधिक जानकारी के लिए इस सवाल का जवाब।

document.querySelectorAll('[tagName$="_Sequence"]')

मैंने यह नहीं कहा कि यह बहुत अच्छा होगा :) PS: मैं tag_nameटैगनाम का उपयोग करने की सलाह दूंगा, इसलिए आप 'कंप्यूटर जनरेट' पढ़ते समय हस्तक्षेप में न भागें, DOM विशेषताएँ निहित हैं।

Answer 4

मैंने यह लघु लिपि ही लिखी थी; काम करने लगता है।

/**
 * Find all the elements with a tagName that matches.
 * @param {RegExp} regEx  regular expression to match against tagName
 * @returns {Array}       elements in the DOM that match
 */
function getAllTagMatches(regEx) {
  return Array.prototype.slice.call(document.querySelectorAll('*')).filter(function (el) { 
    return el.tagName.match(regEx);
  });
}
getAllTagMatches(/^di/i); // Returns an array of all elements that begin with "di", eg "div"

Comments

querySelectorAll द्वारा लौटाए गए ऑब्जेक्ट सभी ब्राउज़रों पर फ़िल्टर का समर्थन करने की आवश्यकता नहीं है (क्योंकि यह हमेशा एक नियमित जावास्क्रिप्ट सरणी नहीं है)। उत्पादन में इस दावे की जाँच करना सुनिश्चित करें, या तो स्क्रिप्ट तैयार होने से पहले (यदि स्क्रिप्ट गतिशील रूप से उत्पन्न हुई है), या स्थिति विवरणों का उपयोग कर।

— दिमित्री

बहुत अच्छा जवाब ... यह मेरे मैच के लिए मिला क्लोज मैच था। मैं कस्टम तत्वों के साथ काम कर रहा हूं और इस तरह की विशेषताएं अभी भी मैन्युअल काम कर रही हैं, दुख की बात है।

— कोडप्लब

Answer 5

जो नहीं है उसे कहकर रास्ता है। बस कुछ ऐसा न करें जो कभी नहीं होगा। एक अच्छा सीएसएस चयनकर्ता संदर्भ: https://www.w3schools.com/cssref/css_selectors.asp जो दिखाता है: निम्नानुसार चयनकर्ता नहीं:

:not(selector)  :not(p) Selects every element that is not a <p> element

यहाँ एक उदाहरण है: एक div कुछ के बाद (कुछ भी लेकिन az टैग)

div > :not(z){
 border:1px solid pink;
}