MutationObserver?

내장 객체입니다. 돔의 변화를 관찰하고 변화가 감지될 때 콜백함수를 발생시켜줍니다. 이벤트의 작동원리와 같네요.

문법

1. 콜백함수를 담아 옵저버를 만듭니다.

let observer = new MutationObserver(callback);

2. dom node를 붙입니다.

observer.observe(node, config);

* config는 어떤 종류의 변경에 반응할 것인가를 결정하는 boolean값입니다.

• childList: node의 직계 자식의 변화
• subtree: 노드의 모든 자손들
• attributes: 노드의 속성
• attributeFilter: 선택된 것만 관찰하기 위한 속성명 배열
• characterData: 노드 데이터(text 등) 관찰 여부
• attributeOldValue: true라면, 이전 속성 값과 새 속성 값을 콜백으로 전달받습니다. 아닐 경우 attributes 옵션 필요.
• characterDataOldValue: true라면, node.data의 이전 값과 새 값을 모두 콜백으로 전달. 아닐 경우 characterDAta옵션 필요.

3. 변화가 감지될 때, 콜백함수의 첫 번째 인수로 MutationRecord가 전달되고, 두 번째 인수로 observer가 전달됩니다.
   MutationRecord의 properties
   - type: 변화 타입. "attributes"(속성의 변경), "characterData"(텍스트 변경), "childList"(자식의 추가/삭제) 중의 하나.
   - target: 변화가 발생한 위치
   - addedNodes/removeNodes: 추가된/제거된 노드
   - previousSibling/nextSibling: 이전/다음 형제노드 추가/제거
   - attributeName/attributeNamespace: name, namespace(xml)의 변화된 속성
   - oldValue: attributeOldValue, characterDataOldValue