변형 관찰자

많은 앱 및 사이트에서는 HTML 및 JavaScript를 사용하여 사용자 지정 컨트롤을 빌드합니다. 이러한 컨트롤은 input 요소에서 제공된 컨트롤처럼 내장되어 있지 않습니다. 나머지 웹 플랫폼에서 잘 작동하려면 이러한 컨트롤은 콘텐츠 변경에 맞게 조정되고 이벤트에 응답하고 사용자 조작을 처리할 수 있어야 합니다. 앱 및 사이트에서는 DOM을 모니터링하고 이에 따라 응답해야 합니다.

Internet Explorer 11에서 웹 개발자는 관찰하고 따라야 하는 DOM 변형을 모니터링하는 데 도움이 되는 W3C DOM4 변형 관찰자에 대한 지원을 얻습니다. 예를 들어 웹 개발자는 스크립트가 실행된 후, 하지만 화면에 새 프레임이 그려지기 전에 알림을 원할 수 있습니다.

변형 관찰자는 변형 이벤트에서 지원되는 모든 동일한 시나리오에 대해 빠르게 동작하는 대체와 속성 변경 이벤트에서 지원되는 시나리오에 대한 대체를 제공합니다. 자세한 내용은 "변형 및 속성 변경 이벤트를 변형 관찰자에 마이그레이션"을 참조하세요.

MutationObserver 개체

MutationObserver 개체는 하나 이상의 DOM 노드에서 지정된 변경을 모니터링 및 기록하는 데 사용됩니다. 관찰할 수 있는 변경 형식은 다음과 같습니다.

  • 자식 노드의 추가 및 제거
  • 특성의 추가, 제거 및 변경
  • 자식 텍스트 노드 값에 대한 변경

MutationObserver 생성자에는 변형에 대해 알리는 데 사용할 콜백 함수가 필요합니다.


// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

MutationObserver 개체를 만든 후 observe 메서드를 사용하여 모니터링할 노드에 개체를 등록하고 수집할 정보 형식을 지정합니다.


// Register the target node to observe and specify which DOM changes to watch
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});


다음과 같은 정보 유형을 모니터링하고 수집할 수 있습니다.

MutationObserver 옵션설명

childList

대상 노드 자식 요소의 추가 및 제거를 모니터링하려면 true로 설정합니다. 이 옵션에는 대상 요소의 자식으로 추가되거나 제거되는 텍스트 노드가 포함됩니다. 예:

{ childList: true }

attributes

대상 노드의 특성에 대한 변경(값의 추가, 제거 및 변경)을 모니터링하려면 true로 설정합니다. 예:

{ attributes: true }

characterData

대상 노드의 텍스트 콘텐츠(자식 텍스트 노드) 값에 대한 변경을 모니터링하려면 true로 설정합니다. 예:

{ characterData: true }

subtree

대상 노드의 모든 하위 항목에 대한 변경을 모니터링하려면 true(childList, attributes 또는 characterDatatrue여야 함). 예:

{ childList: true, subtree: true }

attributeOldValue

대상 노드의 이전 특성 값을 기록하려면 true로 설정합니다(attributestrue여야 함). 예:

{ attributes: true, attributeOldValue: true }

characterDataOldValue

대상 노드의 이전 텍스트 데이터를 기록하려면 true로 설정합니다(characterDatatrue여야 함). 예:

{ characterData: true, characterDataOldValue: true }

attributeFilter

특정 특성에 대한 변경만 모니터링하려면 특성 로컬 이름(네임스페이스 제외)의 배열로 설정합니다(attributestrue여야 함). 예:

{ attributes: true, attributeFilter: ["id", "dir"] }

 

관련 변형이 발생하는 경우 MutationObserverMutationRecord 개체에서 요청한 변경 정보를 기록하고 현재 범위 내의 모든 스크립트가 실행된 후 콜백 함수를 호출합니다. 콜백이 마지막으로 호출된 시간 이후 하나 이상의 변형(각각 단일 MutationRecord로 표시됨)이 발생할 수 있습니다.


// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

// Register the target node to observe and specify which DOM changes to watch
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});

// This will invoke the mutationObjectCallback function (but only after all script in this
// scope has run). For now, it simply queues a MutationRecord object with the change information
targetObject.appendChild(document.createElement('div'));

// Now a second MutationRecord object will be added, this time for an attribute change
targetObject.dir = 'rtl';


콜백 함수는 두 개의 매개 변수와 함께 호출됩니다.

MutationRecord 개체

개별 MutationRecord 개체를 검사하여 변경의 형식 및 내용을 식별합니다.


// Inspect the array of MutationRecord objects to identify the nature of the change
function mutationObjectCallback(mutationRecordsList) {
  console.log("mutationObjectCallback invoked.");

  mutationRecordsList.forEach(function(mutationRecord) {
    console.log("Type of mutation: " + mutationRecord.type);
    if ("attributes" === mutationRecord.type) {
      console.log("Old attribute value: " + mutationRecord.oldValue);
    }
  });
}

MutationRecord 개체는 다음 정보를 제공합니다.

MutationRecord 속성설명

type

MutationRecord로 표시되는 변형 형식을 검색합니다.

attributes

특성이 대상 노드에서 변경되었습니다.

characterData

대상 노드의 텍스트 콘텐츠(자식 텍스트 노드) 값이 변경되었습니다.

childList

대상 노드의 자식(또는 하위 트리 하위 항목)이 추가 또는 제거되었습니다.

target

MutationRecord가 기록된 노드를 검색합니다.

addedNodes

추가된 노드의 배열을 검색합니다. 추가된 노드가 없을 경우 배열이 비어 있습니다.

removedNodes

제거된 노드의 배열을 검색합니다. 제거된 노드가 없을 경우 배열이 비어 있습니다.

previousSibling

추가되거나 제거된 노드의 이전 형제를 검색하고, 해당 항목이 없는 경우(또는 MutationRecord.typechildList가 아닌 경우) null입니다.

nextSibling

추가되거나 제거된 노드의 이전 형제를 검색하고, 해당 항목이 없는 경우(또는 MutationRecord.typechildList가 아닌 경우) null입니다.

attributeName

추가, 제거 또는 변경된 특성의 이름을 검색하고, 이외의 경우에는 null입니다.

attributeNamespace

추가, 제거 또는 변경된 특성의 네임스페이스를 검색하고, 이외의 경우에는 null입니다.

oldValue

변형된 attribute 또는 characterData의 이전 값을 검색하고, 이외의 경우에는 null입니다.

 

MutationObserverMutationRecord 개체 배열은 takeRecords 메서드가 호출될 때까지 모든 관련 변경을 축적합니다. 이 메서드는 큐에서 레코드를 제거하고 반환합니다.

변경 모니터링을 중지하려면 MutationObserverdisconnect 메서드를 호출합니다. 변형 데이터를 저장해야 하는 경우 먼저 takeRecords 메서드를 호출해야 합니다. 이 메서드는 대상 요소에서 MutationObserver의 연결을 끊은 후에 유지되지 않습니다.

이전 대상 요소에서 연결을 끊은 후에 MutationObserver 인스턴스를 다시 사용할 수 있지만 콜백 함수를 수정할 수 없고 observe 메서드를 사용하여 대상 요소/변경 기록 옵션을 다시 등록해야 합니다.

관련 항목

변형 및 속성 변경 이벤트를 변형 관찰자에 마이그레이션

 

 

표시:
© 2014 Microsoft. All rights reserved.