2013-08-14 7 views
6

मैं document fragment के साथ खेल रहा हूं। मुझे यह समझना मुश्किल लगता है कि जब मैं इसे डोम में जोड़ता हूं तो यह कैसे व्यवहार करता है।क्या मैं एक दस्तावेज़ खंड का संदर्भ रख सकता हूं?

मैं doc fragment बना देता हूं जिसे मैं एक चर को आवंटित करता हूं, जब मैं इसमें कुछ सामान डालता हूं, और दस्तावेज़ में दस्तावेज़ को जोड़ता हूं। लेकिन अगर मैं element को साफ़ करता हूं तो मेरे चर जो दस्तावेज़ खंड के संदर्भ में होना चाहिए, एक खाली दस्तावेज़ खंड होता है।

मैं किसी तृतीय पक्ष lib के लिए कैश बनाने की कोशिश कर रहा हूं जो दस्तावेज़ खंड बनाता है। तो मैं यह काम करना चाहता हूं। क्या मैं डीओएम में टुकड़ा जोड़ने से पहले क्लोन नोड बनाना चाहिए, क्या यह सही है?

मैं एक जे एस बेला बनाया है: http://jsfiddle.net/4CTXG/1/

var test = document.createDocumentFragment(); 
//var test = document.createElement("div"); // This one work 

$(test).append($("<div>").html('Hello world!')); 


$("#result").append(test); 

setTimeout(function(){ 
    $("#result").children().remove(); 
    $("#result").append(test); 

    console.log('Now test should have been appended'); 
    $(result).css({"background": "#FF0000"}); 
},5000) 

उत्तर

11

जब आप डीओएम में एलिमेंट (उदा। <div>) जोड़ते हैं, तो एलिमेंट को अपने नए माता-पिता के बच्चे के रूप में जोड़ा जाता है। Div के बच्चे नहीं बदला जाता है। जब आप अपने माता-पिता से तत्व हटाते हैं, तो एलिमेंट को सिर्फ डीओएम से अलग किया जाता है। यह आपके पास अभी भी तत्व का संदर्भ है, इसमें अभी भी इसके बच्चे शामिल होंगे, जो बाद में पुनः प्राप्त करने के लिए उपलब्ध हैं।

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

तो दस्तावेज़फ्रेगमेंट को जोड़ने के बजाय, आपको टुकड़े का गहरा क्लोन जोड़ना चाहिए।

गोरी विवरण के लिए http://dom.spec.whatwg.org/#concept-node-insert देखें।

+0

बहुत उपयोगी उत्तर +1 –

-1

जावास्क्रिप्ट वस्तुओं संदर्भ के बजाय मूल्य से कॉपी कर रहे हैं। तो जब आप एक चर के लिए खंड आवंटित करते हैं और फिर खंड को डीओएम में डालते हैं, तो वेरिएबल और डोम दोनों एक ही ऑब्जेक्ट का संदर्भ दे रहे हैं। आप जो भी परिवर्तन करते हैं वह दूसरे में भी होगा।

यदि आप वास्तव में चरम को किसी ऑब्जेक्ट को संदर्भित करना चाहते हैं जो DOM से अलग है, तो क्लोनिंग सही दृष्टिकोण है।

+0

लेकिन यह createElement के साथ क्यों चल रहा है? और यह क्यों मिटा दिया गया है? –

+0

क्योंकि [createDocumentFragment()] (https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment) एक ऑब्जेक्ट देता है, जबकि [createElement()] (https: //developer.mozilla .org/en-US/दस्तावेज़/वेब/एपीआई/document.createElement) एक HTML तत्व देता है। –

+0

ठीक है, समझ में धन्यवाद। क्या इसे हटाए बिना डीओएम से दस्तावेज़ खंड को हटाना संभव है? –

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