getElementsByTagName ("*") हमेशा अद्यतन किया जाता है?

Question

मैं इस कोड बना दिया है:

var foo=document.createElement("div"); 

var childs=foo.getElementsByTagName("*"); 

console.log(childs.length);//0 OK 

var a=document.createElement("a"); 

foo.appendChild(a); 

console.log(childs.length);//1 WTF? 

एक बेला: http://jsfiddle.net/RL54Z/3/

मैं पांचवें और छठे लाइन ताकि childs.length अद्यतन किया जाता है के बीच childs=foo.getElementsByTagName("*"); लिखने के लिए नहीं है।

यह कैसे हो सकता है?

Answer 1

डोम में नोड्स के अधिकांश सूचियों (जैसे getElementsBy*, querySelectorAll, और Node.childNodes से लौटे) सरल सारणी, बल्कि NodeList ऑब्जेक्ट नहीं है। NodeList ऑब्जेक्ट आमतौर पर "लाइव" होते हैं, दस्तावेज़ में उस परिवर्तन में Nodelist ऑब्जेक्ट को स्वचालित रूप से प्रचारित किया जाता है।

तो (इसका अपवाद querySelectorAll से परिणाम है, जो रहते नहीं है!) आप अपने उदाहरण में देख सकते हैं, अगर आप सभी a तत्वों की एक NodeList पुनः प्राप्त है, तो दस्तावेज़ के लिए एक और a तत्व जोड़ सकती है कि a आपके नोडलिस्ट ऑब्जेक्ट में दिखाई देगा।

यही कारण है कि दस्तावेज़ में परिवर्तन करने के दौरान एक नोडलिस्ट के माध्यम से पुन: प्रयास करना असुरक्षित है। उदाहरण के लिए, यह कोड आश्चर्यजनक तरीकों से व्यवहार करेगा:

var NodeListA = document.getElementsByTagName('a'); 

for (var i=0; i<NodeListA.length; ++i) { 
    // UNSAFE: don't do this! 
    NodeListA[i].parentNode.removeChild(NodeListA[i]); 
} 

क्या होगा आप छोड़ने वाले तत्वों को समाप्त कर देंगे! या तो नोडलिस्ट के अंत से पीछे की ओर घुमाएं, या नोडलिस्ट को एक सादे ऐरे (जो अपडेट नहीं होगा) पर कॉपी करें और फिर उसके साथ काम करें।

Mozilla MDC site पर नोडलिस्ट के बारे में और पढ़ें।

Answer 2

आप documentation पढ़ा, तो आप हैरान

नहीं होगा दिया टैग नाम के साथ तत्वों की सूची देता है। निर्दिष्ट तत्व के नीचे उपट्री तत्व को छोड़कर, खोजा जाता है। लौटाई गई सूची लाइव है, जिसका अर्थ है कि यह स्वचालित रूप से डीओएम पेड़ के साथ अपडेट हो जाता है। नतीजतन, एक ही तत्व और तर्क के साथ कई बार element.getElementsByTagName को कॉल करने की आवश्यकता नहीं है।