2017-02-13 6 views
0

javascriptでグローバルリスナーを追加すると、どのようなhtml要素(div、spanなど)が作成されているかを確認し、必要に応じてそれらを飾ることができますか?Javascript global "creation element"リスナー

私の場合、特定の条件が満たされていれば、htmlの "input"要素にclass属性を追加したいと思います。

これはインタラクティブなウェブサイトなので、要素が動的に作成されるため、入力要素として読み込まれたページがまだ作成されていないときは実行できません。

+3

可能な重複(http://stackoverflow.com/questions/3219758/detect-changes-in-the-dom) [最も効率的なDomの検出/監視の方法](http://stackoverflow.com/questions/2457043/most-efficient-method-of-detecting-monitoring-dom-changes)も参照してください。 – CollinD

+1

このapiを意味しますか? https://developer.mozilla.org/en/docs/Web/API/MutationObserver –

+0

私はそれを見て遊んだが、重複しているとは思わない。私は、DOMのどこかでInputElementの "every every"作成について知らせたいのですが、MutationObserverではDOM変異を観察したい要素を指定しなければならず、指定した要素の突然変異のみを通知します。しかし、どの要素を指定するのか分かりません。私がBODYを指定すると、追加/削除される要素がいくつか表示されますが、BODYの子の子として作成されたINPUT要素は通知されません。または私は何かを逃していますか? – edbras

答えて

1

MutationObserverは、 DOMの変更に対応する方法を開発者に提供します。 DOM3イベント仕様の で定義されている突然変異イベントの代わりに設計されています。 .. for more details

例:

// select the target node 
var target = document.getElementById('some-id'); 

// create an observer instance 
var observer = new MutationObserver((mutations) => { 
    mutations.forEach((mutation) => { 
    console.log(mutation.type); 
    });  
}); 

// configuration of the observer: 
var config = { attributes: true, childList: true, characterData: true }; 

// pass in the target node, as well as the observer options 
observer.observe(target, config); 

// later, you can stop observing 
observer.disconnect(); 
[DOMにおける変更を検出]の
+0

「some-id」はのIDですか?リスナーによって作成されて受信される要素に属性を追加する方法はありますか? – edbras