JS 監聽 TD 內容變化：MutationObserver 替代輪詢的現代方案

需求：動態監測 `` 內容變化。`onchange` 不支持 `td`，傳統 `setInterval` 輪詢低效。

現代方案：MutationObserver (IE11+ 全支持)

const target = document.getElementById('target');
const observer = new MutationObserver(mutations => {
    mutations.forEach(m => {
        if (m.type === 'childList' || m.type === 'characterData') {
            console.log('TD 內容變更:', target.textContent);
            // 觸發業務邏輯
        }
    });
});
observer.observe(target, { 
    childList: true,      // 子節點增減
    characterData: true,  // 文本內容變化
    subtree: true         // 監聽後代
});

// 停止監聽: observer.disconnect();

優勢

• **事件驅動**，零輪詢開銷，變化瞬間觸發。
• 可精確過濾變化類型 (屬性/文本/子樹)。
• 性能遠優於 `setInterval`。

兼容舊瀏覽器 (IE10-) 降級方案

if (window.MutationObserver) { /* 上述代碼 */ }
else {
    // 僅作為最後手段
    let last = target.innerHTML;
    setInterval(() => {
        if (target.innerHTML !== last) {
            last = target.innerHTML;
            console.log('變更:', last);
        }
    }, 500);
}

項目中**優先用 MutationObserver**，僅在極舊環境降級輪詢。