MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

MutationObserver

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

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

생성자

MutationObserver()

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

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

인스턴스 함수들

void observe( Node target, MutationObserverInit options );
void disconnect();
Array takeRecords();

: Node의 대상은 NodeJS 와 혼동되지 말아야 합니다.

observe()

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

void observe(
  Node target,
  MutationObserverInit options
);
파라미터
target
DOM 변경을 감시할 Node.
options
DOM 변경이 보고되어야 할 특정 MutationObserverInit 객체.
주: Adding an observer to an element is just like addEventListener, if you observe the element multiple times it does not make a difference. Meaning if you observe element twice, the observe callback does not fire twice, nor will you have to run disconnect() twice. In other words, once an element is observed, observing it again with the same observer instance will do nothing. However if the callback object is different it will of course add another observer to it.

disconnect()

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

void disconnect();

takeRecords()

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

Array takeRecords();
반환값

MutationRecord들의 배열을 반환.

MutationObserverInit

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

주: At the very least, childList, attributes, or characterData must be set to true. Otherwise, "An invalid or illegal string was specified" error is thrown.
속성 설명
childList Set to true if additions and removals of the target node's child elements (including text nodes) are to be observed.
attributes Set to true if mutations to target's attributes are to be observed.
characterData Set to true if mutations to target's data are to be observed.
subtree Set to true if mutations to target and target's descendants are to be observed.
attributeOldValue Set to true if attributes is set to true and target's attribute value before the mutation needs to be recorded.
characterDataOldValue Set to true if characterData is set to true and target's data before the mutation needs to be recorded.
attributeFilter Set to an array of attribute local names (without namespace) if not all attribute mutations need to be observed.

사용 예

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

// 대상 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();

더 보기

규격

규격 상태 의견
DOM
The definition of 'MutationObserver' in that specification.
Living Standard  
DOM4
The definition of 'MutationObserver' in that specification.
Recommendation  

브라우저 호환성

Feature 크롬 파이어폭스 (Gecko) 인터넷 익스플로러 오페라 사파리
기본 지원 18 -webkit
26
14 (14) 11 15 6.0 -webkit
Feature 안드로이드 안드로이드용 크롬 파이어폭스 모바일 (Gecko) IE 폰 오페라 모바일 사파리 모바일
기본 지원 4.4 18 -webkit
26
14.0 (14) 11 (8.1) 15 6 -webkit
7

문서 태그 및 공헌자

 이 페이지의 공헌자: voidnoble
 최종 변경: voidnoble,