你不知道的MutationRecord

liuhao9999發表於2020-11-19

每個 MutationRecord 都代表一個獨立的 DOM 變化，在每次隨 DOM 變化呼叫 MutationObserver 的回撥函式時，一個相應的 MutationRecord 會被作為引數，傳遞給回撥函式。

屬性

屬性型別描述
MutationRecord.typeString如果是屬性變化，則返回 "attributes"；
如果是 characterData 節點變化，則返回 "characterData"；
如果是子節點樹 childList 變化，則返回 "childList"。
MutationRecord.targetNode根據 MutationRecord.type，返回變化所影響的節點。
對於屬性 attributes 變化，返回屬性變化的節點。
對於 characterData 變化，返回 characterData 節點。
對於子節點樹 childList 變化，返回子節點變化的節點。
MutationRecord.addedNodesNodeList返回被新增的節點。
如果沒有節點被新增，則該屬性將是一個空的 NodeList。
MutationRecord.removedNodesNodeList返回被移除的節點。
如果沒有節點被移除，則該屬性將是一個空的 NodeList。
MutationRecord.previousSiblingNode返回被新增或移除的節點之前的兄弟節點，或者 null。
MutationRecord.nextSiblingNode返回被新增或移除的節點之後的兄弟節點，或者 null。
MutationRecord.attributeNameString返回被修改的屬性的屬性名，或者 null。
MutationRecord.attributeNamespaceString返回被修改屬性的名稱空間，或者 null。
MutationRecord.oldValueString

返回值取決於 MutationRecord.type。
對於屬性 attributes 變化，返回變化之前的屬性值。
對於 characterData 變化，返回變化之前的資料。
對於子節點樹 childList 變化，返回 null。

注意，如果要讓這個屬性起作用，在相應的 MutationObserverInit 引數的 MutationObserver observe 方法中，attributeOldValue 或者 characterDataOldValue 必須設定為 true。

相關文章