현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
MutationObserver 는 개발자들에게 DOM 변경 감시를 제공합니다. DOM3 이벤트 기술 설명서에 정의된 Mutation Events 를 대체합니다.
생성자
MutationObserver()
새 DOM 변경 감시자의 인스턴스화에 대한 생성자.
new MutationObserver( function callback );
Parameters
callback- 콜백 함수는 각 DOM 변경시 마다 호출될 것입니다. 감시자는 두 인자와 함께 이 함수를 호출할 것입니다. 첫째 인자는 오브젝트들의 배열이며, 오브젝트의 각 형식은
MutationRecord입니다. 둘째 인자는 이MutationObserver인스턴스 입니다.
인스턴스 함수들
void observe( |
void disconnect(); |
Array takeRecords(); |
observe()
특정 노드에서 DOM 변경의 알림을 받을 수 있도록 MutationObserver 인스턴스를 등록.
void observe(Nodetarget,MutationObserverInitoptions );
파라미터
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();
더 보기
- A brief overview
- A more in-depth discussion
- A screencast by Chromium developer Rafael Weinstein
- The mutation summary library
규격
| 규격 | 상태 | 의견 |
|---|---|---|
| DOM The definition of 'MutationObserver' in that specification. |
Living Standard | |
| DOM4 The definition of 'MutationObserver' in that specification. |
Recommendation |