web-dev-qa-db-ja.com

DOMNodeInsertedの代替

DOMNodeInsertedは動的ページを遅くすることが知られています MDNでも推奨 まったく使用しませんが、代替手段を提供していません。

挿入された要素には興味がありません。スクリプトがDOMを変更するタイミングを知る必要があるだけです。ミューテーションイベントリスナーに代わるより良い方法はありますか（nsiTimer内のgetElementsByTagName）

javascriptdomfirefox-addondhtmlmutation-events
29
Fábio

最近の携帯電話と新しいバージョンのブラウザー（Firefox 5以降、Chrome 4以降、Safari 4以降、iOS Safari 3以降、Android 2.1+）、次のコードを使用して、domノードの挿入のための素晴らしいイベントを作成できます。これは、ページの静的マークアップの一部であるノードでも実行されます！

ここに例と完全な投稿へのリンクがあります： http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

Mutation Observersに関する注意：最近のブラウザーの新しいMutation Observers機能は、DOMへの単純な挿入と変更を監視するのに最適ですが、このメソッドはCSSルールの一致を監視できるため、はるかに多くのことに使用できます。これは多くのユースケースで非常に強力なので、これをライブラリにまとめました https://github.com/csuwildcat/SelectorListener

さまざまなブラウザを対象とする場合は、CSSおよびanimationstartイベント名に適切なプレフィックスを追加する必要があります。詳細については、上記のリンク先の投稿をご覧ください。

基本的なノード挿入の場合

[〜＃〜] css [〜＃〜]：

@keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

div.some-control {
    animation-duration: 0.01s;
    animation-name: nodeInserted;
}

JavaScript：

document.addEventListener('animationstart', function(event){
    if (event.animationName == 'nodeInserted'){
        // Do something here
    }
}, true);

より複雑なセレクター一致をリッスンする：

これにより、Mutation Observersでは不可能であったことをほぼ実現できます。

[〜＃〜] css [〜＃〜]：

@keyframes adjacentFocusSequence {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

.one + .two + .three:focus {
    animation-duration: 0.01s;
    animation-name: adjacentFocusSequence;
}

JavaScript：

document.addEventListener('animationstart', function(event){
    if (event.animationName == 'adjacentFocusSequence'){
        // Do something here when '.one + .two + .three' are 
        // adjacent siblings AND node '.three' is focused
    }
}, true);
44
csuwldcat

@naugturが簡潔に述べた1つの新しい代替案は MutationObserver です。これは、開発中のブラウザーがサポートしている場合（ブラウザー拡張を開発している場合など）、廃止予定のミューテーションイベントの代わりとして設計されています。

11
Mike Henry

Csuwldcatで説明したのと同じ手法が、使いやすいjQueryプラグインになりました（それがあなたの場合）： https://github.com/liamdanger/jQuery.DOMNodeAppear

0
Arktype