2012-12-16 11 views
5

मैं कस्टम टैग का उपयोग कर रहा एक आवेदन में वर्गों को परिभाषित करने के द्वारा विशिष्ट तत्व (माता पिता की) हो रही है, इसलिए मैं कुछ इस तरह है:जावास्क्रिप्ट नाम

<mysection> 

    <form> 
     <input name="myfield"> 
    </form> 

</mysection> 

मैं निम्नलिखित और प्राप्त करने में सक्षम उपयोग कर रहा हूँ टैग (सांत्वना देने मुद्रित, सब कुछ ग्रूवी है)

var parent = document.getElementsByTagName('mysection'); 

मुद्दा मैं नाम से बच्चे को क्षेत्र की खोज कर रहा है हो रही है:

var myfield = parent.getElementsByName("myfield"); 

... क्योंकि मैं किसी अन्य 'सेक्शन' पर नहीं लेना चाहता हूं जिसमें 'मायफील्ड' नाम के साथ इनपुट हो।

संपादित करें:

var parent = document.getElementsByTagName('mysection')[0]; 

सुझाव दिया और धारा सामग्री सांत्वना देने रिटर्न था, हालांकि, getElementsByName एक त्रुटि फेंकता है:

Uncaught TypeError: Object #<NodeList> has no method 'getElementsByName' 
+2

पर वापस समर्थन करने के लिए एक पॉलीफिल है 'आईडी' के लिए घृणा क्यों? –

+0

आईडी का उपयोग करके आप अपनी सभी समस्याओं से छुटकारा पा सकते हैं। –

+0

क्योंकि यह एक बड़ी परियोजना है और मैं आईडी अधिभार नहीं चाहता हूं। – Fluidbyte

उत्तर

9

getElementsByTagName() और getElementsByName() का उपयोग करते हुए एक NodeList वापस आ जाएगी, आप की जरूरत इस तरह की सूची का पहला तत्व प्राप्त करने के लिए:

var parent = document.getElementsByTagName('mysection')[0]; 
var myfield = parent.getElementsByName("myfield")[0]; 

संपादित

आप सही थे, getElementsByName एक तत्व के लिए मान्य नहीं है। मैं यह सुनिश्चित नहीं कर रहा हूं कि आप इसकी कार्यक्षमता को स्थानीयकृत कैसे करें, जैसा कि आप करने का प्रयास कर रहे हैं। ऐसा लगता है कि यह केवल document के लिए काम करेगा। यदि आप इसे स्थानीय दायरे में उपयोग करना चाहते हैं तो आपको getElementsByName का अपना कार्यान्वयन लिखना पड़ सकता है।

दूसरा संपादित

अच्छा होने के लिए, मुझे लगता है कि कार्यान्वयन आपके लिए बनाया: डी यहाँ यह अपने सभी "महिमा" में है।

Element.prototype.getElementsByName = function (arg) { 
    var returnList = []; 
    (function BuildReturn(startPoint) { 
     for (var child in startPoint) { 
      if (startPoint[child].nodeType != 1) continue; //not an element 
      if (startPoint[child].getAttribute("name") == arg) returnList.push(startPoint[child]); 
      if (startPoint[child].childNodes.length > 0) { 
       BuildReturn(startPoint[child].childNodes); 
      } 
     } 
    })(this.childNodes); 
    return returnList; 
}; 
var parent = document.getElementsByTagName('mysection')[0]; 
var myfield = parent.getElementsByName("myfield")[0]; 

छोटे ठीक

मैं गलत तरीके से प्रत्यावर्तन में तत्व गुजर रहा था और न अपने बच्चों को। ऊपर दिया गया कोड अब पारित उचित तर्क के साथ संपादित किया गया है। काम कर रहे बेला देखें: http://jsfiddle.net/js6NP/5/

+0

नोट: 'getElementsByTagName()' और 'getElementsByName()' एक 'ऐरे' वापस मत करो। इसके बजाय, वे एक ['नोडलिस्ट '] (https://developer.mozilla.org/en-US/docs/DOM/NodeList) लौटाते हैं। –

+0

@ डेरेक - तकनीकी रूप से नहीं, यह दर्शाता है कि यह एक नोडलिस्ट है और एक सरणी नहीं है। –

+0

'getElementsByName' त्रुटि को वापस कर रहा है: 'Uncaught TypeError: ऑब्जेक्ट # में कोई तरीका नहीं है' getElementsByName'' – Fluidbyte

0

बस के बजाय एक आईडी का उपयोग करें:

<mysection> 
    <form> 
     <input name="myfield" id="fieldName"> 
    </form> 
</mysection> 
var myfield = document.getElementById("fieldName"); 

आईडी supposed to be unique on a page हैं। तो आपको सही तत्व तक पहुंचने में परेशानी नहीं होनी चाहिए।

तुम सच में नाम/टैगनाम, उपयोग करने के लिए getElementsByTagName और getElementsByName दोनों हमेशा एक array (ए खाली एक अगर कोई तत्व मिला था) वापसी है।आप सही तत्व तक पहुंच सकते हैं, जैसे कि आप सरणी में तत्वों तक पहुंच पाएंगे:
document.getElementsByTagName('mysection')[0]; टैगनाम mysection के साथ पहले तत्व के लिए।

document.querySelectorAll('mysection [name="myfield"]'); 

यहाँ आप एक उदाहरण है जहां यह केवल अनुभाग निर्दिष्ट अंदर क्षेत्र को संशोधित करता है देख सकते हैं::

3

मैं वास्तव में एक बहुत अधिक आसान तरीका यह संभाल करने के लिए मिल गया http://jsfiddle.net/fluidbyte/kph6H/

QSA का समर्थन करता है और आधुनिक ब्राउज़रों आईई 8 के लिए संगत है, आईई 7: https://gist.github.com/2724353

संबंधित मुद्दे