HTML5 새로운 기능 Mutation Observer 코드에 대한 자세한 설명

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!