1. 개요

Mutation Observer는 DOM 변경을 모니터링하는 인터페이스입니다. DOM 개체 트리에 변경 사항이 발생하면 Mutation Observer에 알림이 전송됩니다.

개념적으로는 이벤트에 가깝습니다. DOM이 변경되면 Mutation Observer 이벤트가 트리거되는 것으로 이해할 수 있습니다. 그러나 이는 이벤트와 근본적으로 다릅니다. 이벤트는 동기적으로 트리거됩니다. 즉, DOM이 변경되면 해당 이벤트가 즉시 트리거됩니다. Mutation Observer는 DOM이 변경된 후 즉시 트리거되지 않고 트리거됩니다. 현재 DOM 작업이 모두 완료된 후 트리거될 때까지 기다립니다.

잦은 DOM 변경에 대처할 수 있도록 설계되었습니다. 예를 들어 문서에 1000개의 문단(p요소)이 연속적으로 삽입되면 1000개의 삽입 이벤트가 연속적으로 발생하고 각 이벤트의 콜백 함수가 실행되므로 브라우저가 Freeze; Mutation Observer는 완전히 다릅니다. 1000개의 단락이 모두 삽입된 후에만 트리거되며 한 번만 트리거됩니다.

참고: 콘솔에서 로그를 볼 수 있습니다

Mutation Observer의 특징은 다음과 같습니다.

• 모든 스크립트 작업이 완료될 때까지 기다립니다. 즉, DOM 변경 사항을 하나씩 처리하는 대신 DOM 변경 기록을

  배열
으로 캡슐화하여 처리하는 데 비동기 방식

• 을 사용합니다.

• DOM 노드에서 발생하는 모든 변경 사항을 관찰할 수 있거나 특정 유형의 변경 사항을 관찰할 수 있습니다

현재, Firefox(14+), Chrome(26+), Opera(15+), IE(11+) 및 Safari(6.1+)가 이 API를 지원합니다. Safari 6.0 및 Chrome 18-25에서 이 API를 사용하는 경우 WebKit 접두사(WebKitMutationObserver)를 추가해야 합니다. 다음 표현식을 사용하여 브라우저가 이 API를 지원하는지 확인할 수 있습니다.

var MutationObserver = window.MutationObserver ||
    window.WebKitMutationObserver ||
    window.MozMutationObserver;var mutationObserverSupport = !!MutationObserver;

2. 사용법

먼저 MutationObserver 생성자를 사용하여 새 인스턴스를 생성하고 이 인스턴스의 콜백 함수를 지정합니다.

var observer = new MutationObserver(callback);

2.1 관찰자 방법

관찰자 방법은 관찰할 DOM 요소와 관찰할 특정 변경 사항을 지정합니다.

var article = document.querySelector('article');
var options = {    
'childList': true,    
'arrtibutes': true};

observer.observer(article, options);

위 코드는 먼저 관찰할 DOM 요소가 기사임을 지정한 다음 관찰할 변경 사항이 하위 요소 및 속성 변경 사항임을 지정합니다. 마지막으로 이 두 가지 자격을 관찰자 개체의 관찰자 메서드에 매개 변수로 전달합니다.

MutationObserver(즉, 위 코드의 옵션 개체)에서 관찰한 DOM 변경 사항에는 다음 유형이 포함됩니다.

• childList: 하위 요소의 변경 사항

• 속성: 속성 변경

• characterData: 노드 콘텐츠 또는 노드 텍스트 변경

• 하위 트리: 모두 하위 노드(하위 노드 및 하위 노드의 하위 노드 변경 포함)

관찰하려는 변경 유형은 옵션 개체에서 해당 값을 true로 지정하면 됩니다. 하위 트리의 변화는 단독으로 관찰할 수 없으며, childList, attribute, CharacterData 중 하나 이상을 동시에 지정해야 한다는 점에 유의해야 합니다.

변경 유형 외에도 옵션 개체는 다음 속성을 설정할 수도 있습니다.

• attributeOldValue: 값은 true 또는 false입니다. true인 경우 변경 전의 속성 값을 기록해야 함을 의미합니다.

• characterDataOldValue: 값은 true 또는 false입니다. true인 경우 변경 전의 데이터 값을 기록해야 함을 의미합니다.

• attributesFilter: 값은 관찰해야 하는 특정 속성을 나타내는 배열입니다(예: ['class', 'str']).

2.2 연결 해제 방법 및 takeRecord 방법

disconnect 방법은 관찰을 중지하는 데 사용됩니다. 해당 변경 사항이 발생하면 콜백 함수가 더 이상 호출되지 않습니다.

observer.disconnect();

takeRecord 메소드는 변경 기록을 지우는 데 사용됩니다. 즉, 더 이상 처리되지 않은 변경 사항을 처리하지 않습니다.

observer.takeRecord

2.3 MutationRecord 객체

DOM 객체가 변경될 때마다 변경 기록이 생성됩니다. 이 변경 기록은 변경과 관련된 모든 정보를 포함하는 MutationRecord 개체에 해당합니다. Mutation Observer가 처리하는 돌연변이 개체들로 구성된 배열입니다.

MutationRecord 개체는 DOM 관련 정보를 포함하며 다음과 같은 속성을 갖습니다.

• 유형: 관찰된 변경 유형(속성, CharacterData 또는 childList).

• target: 변경된 DOM 객체.

• addedNodes: 새로운 DOM 객체.

• removeNodes: DOM 개체를 삭제했습니다.

• previousSibling:前一个同级的DOM对象，如果没有则返回null。

• nextSibling:下一个同级的DOM对象，如果没有就返回null。

• attributeName:发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。

• oldValue:变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。

3、实例

3.1 子元素的变动

下面的例子说明如果读取变动记录。

var callback = function(records) {
    records.map(function(record) {
        console.log('Mutation type: ' + record.type);
        console.log('Mutation target: ' + record.target);
    });
};var mo = new MutationObserver(callback);var option = {    
'childList': true,    'subtree': true};

mo.observer(document.body, option);

上面代码的观察器，观察body元素的所有下级元素（childList表示观察子元素，subtree表示观察子元素的下级元素）的变动。回调函数会在控制台显示所有变动的类型和目标元素。

3.2、属性的变动

下面的例子说明如何追踪属性的变动。

var callback = function(records) {
    records.map(function(record) {
        console.log('Previous attribute value: ' + record.oldValue);
    });
};
var mo = new MutationObserver(callback);
var element = document.getElementById('#my_element');
var option = {    
'attribute': true,    
'attributeOldValue': true};

mo.observer(element, option);

上面代码先设定追踪属性变动（'attributes': true），然后设定记录变动前的值。实际发生变动时，会将变动前的值显示在控制台。

위 내용은 HTML5 새로운 기능 Mutation Observer 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!