MutationObserver

MutationObserver 는 개발자들에게 DOM 변경 감시를 제공합니다. DOM3 이벤트 기술 설명서에 정의된 Mutation Events 를 대체합니다.

생성자

MutationObserver()

새 DOM 변경 감시자의 인스턴스화에 대한 생성자.

new MutationObserver(
  function callback
);

Parameters

callback

콜백 함수는 각 DOM 변경시 마다 호출될 것입니다. 감시자는 두 인자와 함께 이 함수를 호출할 것입니다. 첫째 인자는 오브젝트들의 배열이며, 오브젝트의 각 형식은 MutationRecord 입니다. 둘째 인자는 이 MutationObserver 인스턴스 입니다.

인스턴스 함수들

observe()

특정 노드에서 DOM 변경의 알림을 받을 수 있도록 MutationObserver 인스턴스를 등록.

void observe(
  Node target,
  MutationObserverInit options
);

파라미터

target

DOM 변경을 감시할 Node.

options

DOM 변경이 보고되어야 할 특정 MutationObserverInit 객체.

disconnect()

DOM 변경 알림을 받는 MutationObserver 인스턴스 중지. observe() 재사용시까지 감시 콜백은 발동되지 않을 것입니다.

void disconnect();

takeRecords()

MutationObserver 인스턴스의 레코드 큐를 비우고 안에 든것을 반환합니다.

Array takeRecords();

반환값

MutationRecord들의 배열을 반환.

MutationObserverInit

MutationObserverInit 는 다음 속성들을 가진 객체입니다:

사용 예

다음 예제는 이 블로그 글에서 발췌했습니다.

// 대상 node 선택
var target = document.getElementById('some-id');
 
// 감시자 인스턴스 만들기
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// 감시자의 설정:
var config = { attributes: true, childList: true, characterData: true };
 
// 감시자 옵션 포함, 대상 노드에 전달
observer.observe(target, config);
 
// 나중에, 감시를 중지 가능
observer.disconnect();

더 보기

• A brief overview
• A more in-depth discussion
• A screencast by Chromium developer Rafael Weinstein
• The mutation summary library

규격

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!