DOM:如何检测新的子元素？

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

DOMNodeInserted在父级上使用并检查event.target.parentNode添加的元素.如果id是parent,那么元素是直接后代.

演示:http://jsfiddle.net/ThinkingStiff/f2w7V/

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

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

}, false );

Answer 2

假设您的事件处理程序如下所示：

function(evt) {
    // whatever
}

处理程序内部evt.relatedNode是正在执行插入操作的元素。您可以打开它并决定忽略或处理该事件。

看看它的实际效果。