MutationObserver
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2015å¹´7æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
MutationObserver ã¤ã³ã¿ã¼ãã§ã¤ã¹ã¯ã DOM ããªã¼ã¸å¤æ´ãå ãããããã¨ãç£è¦ãããã¨ãã§ããæ©è½ãæä¾ãã¾ãããã㯠DOM3 Events ã®ä»æ§ã§å®ç¾©ããã¦ãã Mutation Events æ©è½ã®ç½®ãæãã¨ãã¦è¨è¨ããããã®ã§ãã
ã³ã³ã¹ãã©ã¯ã¿ã¼
MutationObserver()-
DOM ã®å¤æ´ãè¡ãããã¨ãã«æå®ãããã³ã¼ã«ããã¯é¢æ°ãå¼ã³åºãæ°ãã
MutationObserverãçæãã¦è¿ãã¾ãã
ã¡ã½ãã
disconnect()-
MutationObserverã®ã¤ã³ã¹ã¿ã³ã¹ãä»å¾ã®éç¥ãåãåããã¨ããobserve()ãåã³å¼ã³åºãããã¾ã§åæ¢ãã¾ãã observe()-
æå®ãããªãã·ã§ã³ã«åã DOM ã®å¤æ´ãçºçããã¨ãã«ãã³ã¼ã«ããã¯é¢æ°ãä»ãã¦éç¥ãåä¿¡ãå§ããããã«
MutationObserverãæ§æãã¾ãã takeRecords()-
MutationObserverã®éç¥ãã¥ã¼ããä¿çä¸ã®éç¥ããã¹ã¦åé¤ããMutationRecordã®æ°ããé å (Array) ã§è¿ãã¾ãã
Mutation Observer 㨠resize ã¤ãã³ããªã¹ãã¼ã®ã«ã¹ã¿ãã¤ãºã¨ãã¢
ä¾
以ä¸ã®ä¾ã¯ ãã®ããã°è¨äº ãåèã«ãããã®ã§ãã
// 夿´ãç£è¦ãããã¼ãã鏿
const targetNode = document.getElementById("some-id");
// (夿´ãç£è¦ãã) ãªãã¶ã¼ãã¼ã®ãªãã·ã§ã³
const config = { attributes: true, childList: true, subtree: true };
// 夿´ãçºè¦ãããã¨ãã«å®è¡ãããã³ã¼ã«ããã¯é¢æ°
const callback = (mutationList, observer) => {
for (const mutation of mutationList) {
if (mutation.type === "childList") {
console.log("åãã¼ãã追å ã¾ãã¯åé¤ããã¾ããã");
} else if (mutation.type === "attributes") {
console.log(`${mutation.attributeName} 屿§ã夿´ããã¾ããã`);
}
}
};
// ã³ã¼ã«ããã¯é¢æ°ã«çµã³ã¤ãããããªãã¶ã¼ãã¼ã®ã¤ã³ã¹ã¿ã³ã¹ãçæ
const observer = new MutationObserver(callback);
// 対象ãã¼ãã®è¨å®ããã夿´ã®ç£è¦ãéå§
observer.observe(targetNode, config);
// ãã®å¾ã§ãç£è¦ã忢ãããã¨ãã§ãã
observer.disconnect();
仿§æ¸
| 仿§æ¸ |
|---|
| DOM > # interface-mutationobserver > |