डोम: नए बाल तत्वों का पता कैसे लगाएं?

Question

मैं माता-पिता div के प्रत्यक्ष बच्चे के रूप में केवल एक नए div तत्व के सम्मिलन का पता लगाना चाहता हूं।

उदाहरण:

<div id="parent"> 
    <div id="child1"></div> 
    <div id="child2"></div> 
    <div id="newChild">I want this element to be detected</div> 
</div> 

DOMNodeInserted() घटना मेरे लिए एक समाधान है, क्योंकि यह हर तत्व प्रविष्टि, न सिर्फ बच्चों पर शुरू हो रहा है नहीं है।

तरह:

<div id="parent"> 
    <div id="child1"> 
     <span>I don't want this new element to be detected</span> 
    </div> 
    <div id="child2"></div> 
    <div id="child3"></div> 
</div> 

Answer 1

मान लें आपके ईवेंट हैंडलर इस तरह दिखता है:

function(evt) { 
    // whatever 
} 

हैंडलर के अंदर, evt.relatedNode तत्व है जो में प्रविष्टि प्रदर्शन किया जा रहा है। आप इसे चालू कर सकते हैं और ईवेंट को अनदेखा या संसाधित करने का निर्णय ले सकते हैं।

See it in action।

Answer 2

तुम क्यों DOMNodeInserted का उपयोग नहीं करते, लेकिन ईवेंट हैंडलर में एक चेक/अगर बयान जोड़ सकते हैं ताकि वास्तविक तर्क केवल तब चलता है जब आप यह चाहते हैं?

Answer 3

अभिभावक पर DOMNodeInserted का उपयोग करें और अतिरिक्त तत्व के event.target.parentNode देखें। यदि इसका idparent है, तो तत्व प्रत्यक्ष वंशज है।

डेमो: http://jsfiddle.net/ThinkingStiff/f2w7V/

document.getElementById('parent').addEventListener('DOMNodeInserted', function (event) { 

    if(event.target.parentNode.id == 'parent') { 
     //direct descendant   
    }; 

}, false);