मैं सोच रहा था, जावास्क्रिप्ट किसी भी तत्व से पहला बाल तत्व प्राप्त करने के लिए कई तरह के तरीके प्रदान करता है, लेकिन सबसे अच्छा कौन सा है? सबसे अच्छा, मेरा मतलब है: सबसे क्रॉस-ब्राउज़र संगत, सबसे तेज़, सबसे व्यापक और पूर्वानुमान जब यह व्यवहार की बात आती है। एलियासेस के रूप में उपयोग की जाने वाली विधियों / गुणों की सूची:
var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild; // == children[0]यह दोनों मामलों के लिए काम करता है:
var child = elem.childNodes[0]; // or childNodes[1], see belowयह रूपों, या <div>पुनरावृत्ति के मामले में है । अगर मैं पाठ तत्वों का सामना कर सकता हूं:
var child = elem.childNodes; // treat as NodeList
var child = elem.firstChild;जहाँ तक मैं बाहर काम कर सकते हैं, firstChildसे NodeList का उपयोग करता है childNodes, और firstElementChildउपयोग करता है children। मैं एमडीएन संदर्भ पर इस धारणा को आधार बना रहा हूं:
childNodeतत्व नोड के पहले बाल तत्व का संदर्भ है, याnullयदि कोई नहीं है।
मैं अनुमान लगा रहा हूं कि, गति के मामले में, अंतर, यदि कोई हो, तो कुछ भी नहीं होगा, क्योंकि firstElementChildप्रभावी रूप से एक संदर्भ है children[0], और childrenवस्तु पहले से ही स्मृति में है।
जो मुझे फेंक देता है, वह childNodesवस्तु है। मैंने इसका उपयोग तालिका तत्व में एक रूप को देखने के लिए किया है। childrenसभी फ़ॉर्म तत्वों को सूचीबद्ध करते समय , childNodesHTML कोड से व्हॉट्सएप को शामिल करना भी संभव है:
console.log(elem.childNodes[0]);
console.log(elem.firstChild);दोनों लॉग करते हैं <TextNode textContent="\n ">
console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);सभी लॉग <input type="text"… >। कैसे? मुझे लगता है कि एक वस्तु मुझे "कच्चे" HTML कोड के साथ काम करने की अनुमति देगी, जबकि दूसरा DOM से चिपक जाता है, लेकिन childNodesतत्व दोनों स्तरों पर काम करने लगता है।
अपने प्रारंभिक प्रश्न पर वापस जाने के लिए, मेरा अनुमान होगा: यदि मैं सबसे व्यापक वस्तु चाहता हूं, childNodesतो जाने का रास्ता है, लेकिन इसकी व्यापकता के कारण, यह उस तत्व को वापस करने के संदर्भ में सबसे अधिक अनुमानित नहीं हो सकता है जो मैं चाहता हूं / किसी भी समय उम्मीद करें। क्रॉस-ब्राउज़र समर्थन भी उस मामले में एक चुनौती साबित हो सकता है, हालांकि मैं गलत हो सकता हूं।
क्या कोई भी वस्तुओं के बीच अंतर को स्पष्ट कर सकता है? यदि कोई गति अंतर है, लेकिन नगण्य है, तो मैं भी जानना चाहूंगा। अगर मुझे यह सब गलत लग रहा है, तो मुझे शिक्षित करने के लिए स्वतंत्र महसूस करें।
पुनश्च: कृपया, मुझे जावास्क्रिप्ट पसंद है, इसलिए हां, मैं इस तरह की चीज से निपटना चाहता हूं। "आपके लिए jQuery के सौदे" जैसे उत्तर वह नहीं हैं जो मैं खोज रहा हूं, इसलिए नहींjQuery टैग।