MutationObserver
例如增減節點、變更屬性、修改文字
需要先建立一個instance，並且傳入一個function
會在每次偵測到變化時調用
code:javascript
const mutationObserver = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
console.log(mutation);
});
});
有三個method
observe
開始監聽變化
需要兩個參數
1. 你想觀測的DOM節點
2. 設定用的物件
code:javascript
// 第一個傳入參數為監聽目標，可改為如 document.querySelector("body")
mutationObserver.observe(document.documentElement, {
attributes: true,
characterData: true,
childList: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true,
});
DOM出現變化時，就能從mutations陣列看到紀錄
disconnect
停止監聽變化
mutationObserver.disconnect();
takeRecords
回傳callback啟動之前的最後一次修改
之前用來觀測網頁元件變化的方法
最簡單也最簡潔的方法
會明顯降低服務／網站的效能
於2000年加入
在每次DOM變化都會調用，同樣導致效能問題
目前已經被棄用
CSS animations
有些特怪異的方案
再對這個事件加上handler，就能掌握元素加進DOM中的確切時間
需要檢查event.animationName是否是所想要的動畫
code:css
@keyframes nodeInserted {
from {
opacity: 0.99;
}
to {
opacity: 1;
}
}
animation-duration: 0.001s;
animation-name: nodeInserted;
}
code:javascript
var insertionListener = function (event) {
// Making sure that this is the animation we want.
if (event.animationName === "nodeInserted") {
console.log("Node has been inserted: " + event.target);
}
};
document.addEventListener("animationstart", insertionListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertionListener, false); // IE
document.addEventListener("webkitAnimationStart", insertionListener, false); // Chrome + Safari
MutationObserver擁有更多優勢
涵蓋DOM的每種可能變化
可分段啟動
優秀的支援性
code:javascript
let targetElement = document.querySelector("target element here");
const mo = new MutationObserver((mutations) => {
// handle here
});
mo.observe(targetElement, {
childList: true,
subtree: true,
});