दिलचस्प पोस्ट
स्कैरा स्पाइडर में उपयोगकर्ता परिभाषित तर्क कैसे पास करें I इंटेंट्स के माध्यम से ईमेल प्रोग्राम कैसे खोलें (लेकिन केवल एक ईमेल प्रोग्राम) AngularJS: एक सेवा गुणों को बाध्य करने का सही तरीका कोडिंग मानकों के एक सेट के खिलाफ सी / सी ++ स्रोत कोड की जांच करने के लिए एक नि: शुल्क उपकरण? कार्य में ईवेंट को परिवर्तित करने के लिए पुन: प्रयोज्य पैटर्न जीयूआई एमवीसी को फिर से लिखने के बाद काम नहीं कर रहा है MSVCP140.dll गायब है इनलाइन विधानसभा के माध्यम से स्मृति हेरफेर के आसपास ताले एएस 3 में ईवेंट श्रोता के लिए एक पैरामीटर को सरल तरीके से पास करने के लिए … क्या यह मौजूद है? कैसे सी # में डिफ़ॉल्ट ब्राउज़र में खोलने के लिए PHP से जावास्क्रिप्ट में चर प्राप्त करें मैं जावा में एक अभिभावक-अंतिम / बाल-प्रथम क्लासलोडर कैसे बना सकता हूं, या पुराने सीरियल में पहले से ही लोड किए गए पुराने जेर्सस संस्करण को ओवरराइड करने के लिए कैसे करें? कैसे आईपीए फाइल पुनः हस्ताक्षर करने के लिए? दूसरे सरणी के दूसरे मंद के सूचकांक के रूप में एक अंडाकार सरणी का उपयोग करना? दो तिथियों के बीच व्यावसायिक दिनों की संख्या की गणना करें?

बाल नोड्स पाने का सर्वोत्तम तरीका

मैं सोच रहा था, जावास्क्रिप्ट विभिन्न तत्वों को किसी भी तत्व से पहला बच्चा तत्व प्राप्त करने की पेशकश करता है, लेकिन सबसे अच्छा कौन सा है? सबसे अच्छे से, मेरा मतलब है: यह क्रॉस-ब्राउज़र संगत, सबसे तेज़, सबसे व्यापक और अनुमान है जब यह व्यवहार की बात आती है। विधियों / गुणों की एक सूची जिसे मैं उपनाम के रूप में उपयोग करता हूं:

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 children firstElementChild से firstChild का उपयोग करते हैं, और पहले firstElementChild children का इस्तेमाल करते हैं मैं एमडीएन संदर्भ पर इस धारणा को आधार बना रहा हूं:

childNode तत्व नोड के पहले बच्चे तत्व का एक संदर्भ है, या यदि कोई नहीं है तो null

मैं अनुमान लगा रहा हूं कि, गति के मामले में अंतर, यदि कोई हो, तो कुछ भी नहीं होगा, क्योंकि पहले firstElementChild children[0] लिए प्रभावी रूप से संदर्भ है children[0] , और children ऑब्जेक्ट पहले से ही स्मृति में हैं।

क्या मुझे फेंक देता है, childNodes ऑब्जेक्ट है मैंने इसका उपयोग किसी तालिका तत्व में, एक प्रपत्र पर एक नज़र डालने के लिए किया है। जबकि children सभी फार्म तत्वों को सूचीबद्ध करते हैं, children childNodes में एचटीएमएल कोड से सफेद स्थान भी शामिल है:

 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"> कैसे? मैं समझता हूं कि एक ऑब्जेक्ट मुझे "कच्चा" एचटीएमएल कोड के साथ काम करने की इजाजत देगी, जबकि अन्य डॉम पर चिपक जाती है, लेकिन childNodes तत्व दोनों स्तरों पर काम करता है।

मेरे प्रारंभिक प्रश्न पर वापस जाने के लिए, मेरा अनुमान होगा: अगर मैं सबसे व्यापक वस्तु चाहता हूं, childNodes जाने का रास्ता है, लेकिन इसकी व्यापकता की वजह से, यह उस तत्व को लौटने के मामले में सबसे अधिक उम्मीदवार नहीं है जो मैं चाहता हूं / किसी भी क्षण की अपेक्षा करें क्रॉस-ब्राउज़र समर्थन भी उस मामले में एक चुनौती साबित हो सकता है, हालांकि मैं गलत हो सकता है।

क्या कोई हाथ में वस्तुओं के बीच अंतर को स्पष्ट कर सकता है? यदि गति अंतर है, लेकिन नगण्य है, तो मैं भी जानना चाहता हूं अगर मैं यह सब गलत देख रहा हूं, मुझे शिक्षित करने के लिए स्वतंत्र महसूस करें


पुनश्च: कृपया, कृपया, मुझे जावास्क्रिप्ट पसंद है, हां, मैं इस तरह की बात से निपटना चाहता हूं। "JQuery के साथ आपके लिए इस के साथ सौदों" की तरह जवाब मैं क्या देख रहा हूँ नहीं हैं, इसलिए नहीं jquery टैग

वेब के समाधान से एकत्रित समाधान "बाल नोड्स पाने का सर्वोत्तम तरीका"

लगता है जैसे आप इसे खत्म कर रहे हैं आपने children नोड्स और children बीच का अंतर देखा है, जो कि children नोड्स में सभी नोड्स शामिल हैं, जिसमें पाठ नोड्स शामिल हैं, जिनमें पूरी तरह से व्हाइटस्पेस शामिल है, जबकि children को केवल मूल नोड्स का एक संग्रह है जो कि तत्व हैं। वास्तव में यह सब वहाँ है

या तो संग्रह के बारे में कुछ भी अप्रत्याशित नहीं है, हालांकि इसके बारे में पता करने के लिए कुछ समस्याएं हैं:

  • आईई <= 8 में childNodes नोड्स में सफेद स्पेस-केवल पाठ नोड्स शामिल नहीं हैं, जबकि अन्य ब्राउज़र्स करते हैं
  • आईई <= 8 में children भीतर टिप्पणी नोड भी शामिल हैं, जबकि अन्य ब्राउज़रों में केवल तत्व हैं

children , पहले firstElementChild और दोस्त सिर्फ उपयुक्तताएं हैं, जो सिर्फ तत्वों के लिए सीमित DOM के फ़िल्टर्ड दृश्य प्रस्तुत करते हैं।

पहले एलेमेंटबिल आईई <9 (केवल प्रथम बाल) में उपलब्ध नहीं हो सकता है

आईई पर <9 पहला बच्चा पहला एलेमेंटबल्ड है क्योंकि एमएस डोम (आईई <9) खाली पाठ नोडों को नहीं जमा कर रहा है। लेकिन अगर आप अन्य ब्राउज़रों पर ऐसा करते हैं तो वे रिक्त पाठ नोड्स वापस देंगे …

मेरा समाधान

 child=(elem.firstElementChild||elem.firstChild) 

यह आईई <9 पर भी प्रथमच दे देगी

childNodes प्राप्त करने के लिए क्रॉस ब्राउज़र का तरीका NodeList नोड का उपयोग करना है, फिर nodeType ELEMENT_NODE के साथ सभी नोडों की एक सरणी बनाएं।

 /** * Return direct children elements. * * @param {HTMLElement} * @return {Array} */ function elementChildren (element) { var childNodes = element.childNodes, children = [], i = childNodes.length; while (i--) { if (childNodes[i].nodeType == 1) { children.unshift(childNodes[i]); } } return children; } 

http://jsfiddle.net/s4kxnahu/

यह विशेष रूप से आसान है यदि आप उपयोगिता लायब्रेरी का प्रयोग कर रहे हैं जैसे कि लादाश :

 /** * Return direct children elements. * * @param {HTMLElement} * @return {Array} */ function elementChildren (element) { return _.where(element.childNodes, {nodeType: 1}); } 

भविष्य:

आप querySelectorAll साथ संयोजन में उपयोग कर सकते हैं :scope छद्म-वर्ग (तत्व से मेल खाता है जो कि चयनकर्ता का संदर्भ बिंदु है):

 parentElement.querySelectorAll(':scope > *'); 

यह लिखने के समय :scope क्रोम, फ़ायरफ़ॉक्स और सफारी में :scope का समर्थन है

हे लोग सफेद जगह आपको मूर्ख नहीं करते हैं बस एक कंसोल ब्राउज़र में इसका परीक्षण करें मूल जावास्क्रिप्ट का उपयोग करें यहां और एक ही कक्षा के साथ दो 'उल' सेटों के साथ उदाहरण है। सफेद स्थान से बचने के लिए आपको अपने 'ओल' सूची को एक पंक्ति में सफेद जगह से बचने की ज़रूरत नहीं है, बस अपने ऐरे गिनती का उपयोग करें।

querySelector() साथ सफ़ेद स्थान कैसे प्राप्त करें querySelector() तो childNodes[] जे एस querySelector() लिंक: https://jsfiddle.net/aparadise/56njekdo/

 var y = document.querySelector('.list'); var myNode = y.childNodes[11].style.backgroundColor='red'; <ul class="list"> <li>8</li> <li>9</li> <li>100</li> </ul> <ul class="list"> <li>ABC</li> <li>DEF</li> <li>XYZ</li> </ul> 

बस दूसरे उत्तरों में जोड़ने के लिए, वहां अभी भी उल्लेखनीय अंतर मौजूद हैं, विशेष रूप से जब <svg> तत्वों से निपटते हैं

मैंने दोनों। .childNodes और। .children इस्तेमाल किया है और .children द्वारा दिए गए HTMLCollection साथ काम करना पसंद किया है।

आज हालांकि, मैं आईई / .children साथ समस्याओं में भाग गया जब एक <svg> पर .children का इस्तेमाल .children गया। जबकि। .children को मूल HTML तत्वों पर IE में समर्थित है, यह दस्तावेज़ / दस्तावेज़ के टुकड़े, या एसवीजी तत्वों पर समर्थित नहीं है ।

मेरे लिए, मैं केवल आवश्यक तत्वों को .childNodes[n] माध्यम से पकड़ सकता था क्योंकि मेरे पास चिंता करने के लिए बाहरी पाठ नोड्स नहीं हैं। आप ऐसा करने में सक्षम हो सकते हैं, लेकिन जैसा कि कहीं ऊपर बताया गया है, भूल न करें कि आप अनपेक्षित तत्वों में चला सकते हैं

उम्मीद है कि किसी को यह समझने की कोशिश कर रहे हैं कि उनके सिर को खरोंच क्यों करना चाहिए। .children को आधुनिक .children पर अपने जेएस में कहीं और काम करता है और दस्तावेज़ या एसवीजी तत्वों में विफल रहता है।