Baseline Widely available
MutationObserver
ã¤ã³ã¿ã¼ãã§ã¤ã¹ã¯ã DOM ããªã¼ã¸å¤æ´ãå ãããããã¨ãç£è¦ãããã¨ãã§ããæ©è½ãæä¾ãã¾ãããã㯠DOM3 Events ã®ä»æ§ã§å®ç¾©ããã¦ãã Mutation Events æ©è½ã®ç½®ãæãã¨ãã¦è¨è¨ããããã®ã§ãã
MutationObserver()
DOM ã®å¤æ´ãè¡ãããã¨ãã«æå®ãããã³ã¼ã«ããã¯é¢æ°ãå¼ã³åºãæ°ãã MutationObserver
ãçæãã¦è¿ãã¾ãã
disconnect()
MutationObserver
ã®ã¤ã³ã¹ã¿ã³ã¹ãä»å¾ã®éç¥ãåãåããã¨ãã observe()
ãåã³å¼ã³åºãããã¾ã§åæ¢ãã¾ãã
observe()
æå®ãããªãã·ã§ã³ã«åã DOM ã®å¤æ´ãçºçããã¨ãã«ãã³ã¼ã«ããã¯é¢æ°ãä»ãã¦éç¥ãåä¿¡ãå§ããããã« MutationObserver
ãæ§æãã¾ãã
takeRecords()
MutationObserver
ã®éç¥ãã¥ã¼ããä¿çä¸ã®éç¥ããã¹ã¦åé¤ãã MutationRecord
ã®æ°ããé
å (Array
) ã§è¿ãã¾ãã
https://codepen.io/milofultz/pen/LYjPXPw
ä¾ä»¥ä¸ã®ä¾ã¯ ãã®ããã°è¨äº ãåèã«ãããã®ã§ãã
// 夿´ãç£è¦ãããã¼ãã鏿
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();
仿§æ¸ ãã©ã¦ã¶ã¼ã®äºææ§ é¢é£æ
å ±
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4