ДОМ: Как обнаружить новые дочерние элементы?

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 - это элемент, в который выполняется вставка.Вы можете включить его и принять решение проигнорировать или обработать событие.

Просмотреть его в действии .

Answer 3

Почему бы вам не использовать DOMNodeInserted, а добавить оператор check / if в обработчик событий, чтобы реальная логика выполнялась только тогда, когда вы этого хотите?