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 是正在执行插入的元素。您可以打开它并决定忽略或处理该事件。

See it in action.

Answer 3

你为什么不使用 DOMNodeInserted，而是在事件处理程序中添加一个检查/if 语句，以便真正的逻辑只在你想要的时候运行？