[JS] DOM을 감시하는, MutationObserver

😀 이번 시간에는 dom의 변경을 감시하는 MutationObserver에 대해 알아보았다!

1. MutationObserver

• MutationObserver는 특정 dom의 변경을 감시하는 기능을 제공해준다.
• 이 기능을 사용하기 위해서는 인스턴스를 만들고, 감시하고자 하는 dom을 등록해야 한다.

1) MutationObserver 생성자, 함수

💡 MutationObserver를 사용하기 위해서 생성자와 함수에 대해 알아보자.

(1) MutationObserver 생성자

• new MutationObserve를 이용해 인스턴스(observer)를 만들 수 있다.
• 이 인스턴스(observer)를 통해, 우리는 MutationObserver 기능을 사용할 수 있다.

const observer = new MutationObserver((mutations) => {
   mutations.forEach((mutation) => {
     // mutation: 변경에 대한 정보 제공
   })
});

(2) observe()

• 감시하고자 하는 dom을 MutationObserver 인스턴스에 등록할 수 있다.

observer.observe(감시할 대상, 옵션);

• 옵션의 종류는 아래와 같다.

옵션	설명
childList	감시 대상의 자식 요소(텍스트 노드 포함)의 추가, 제거가 관찰되어야 할 경우 true로 설정
attributes	감시 대상의 속성 변화를 감시해야할 경우 true로 설정
characterData	감시 대상의 데이터(ex. p 태그의 텍스트)가 감시해야할 경우 true로 설정
subtree	감시 대상, 감시대상의 자손에 대해 감시해야할 경우 true로 설정
attributeOldValue	(attributes가 true) 감시 대상의 속성이 변경될 때 이전 속성값을 기록할 경우 true로 설정
characterDataOldValue	(characterData가 true) 감시 대상의 데이터가 변경될 때 이전 데이터값을 기록할 경우 true로 설정
attributeFilter	감시할 속성을 배열로 지정할 수 있음 (ex. attributeFilter: ['style', 'class’] )

• 아래 예시는 class=”target”에 대한 감시등록 예시이다.
• 감시등록을 클릭하면, dom의 색상이 변경될 때마다 화면에 MutationRecord이 출력된다.

See the Pen MutationObserver - observe by KumJungMin (@kumjungmin) on CodePen.

(3) disconnect()

• 감시 중인 dom을 감시해제할 수 있다.

observer.disconnect();

• 아래 예시는 class=”target”에 대한 감시해제 예시이다.
• 감시해제를 클릭시, dom의 상태(색상 변경)가 변경되어도 더이상 MutationRecord가 나타나지 않는다.

See the Pen MutationObserver - disconnect by KumJungMin (@kumjungmin) on CodePen.

(4) takeRecords()

• 감시에 등록했으나, observer의 콜백함수에 의해 처리되지 않은 대기목록을 반환하고 mutation queue를 비운다.
• 주로 disconnect() 전에, 남아있는 큐를 처리할 때 쓰인다.

const target = document.getElementById("target");

const observer = new MutationObserver(callback);
observer.observe(targetNode);

/* 감시를 멈춘 경우, 아직 보류중인 mutations를 처리 */
let mutations = observer.takeRecords();

observer.disconnect();

if (mutations) {
  callback(mutations);
}

1) 사용방법

💡 id=”target”의 배경색이 변경될 때마다 감지하도록 해보자

(1) 대상 dom 가져오기

• 먼저, observer에 등록한 대상 dom을 가져온다.

// 1. 감시 대상 dom 가져오기
const target = document.getElementById('target');

(2) MutationObserver 인스턴스 생성하기

• MutationObserver 기능을 사용하기 위해, 생성자를 이용해 인스턴스를 생성한다.

// 2. 인스턴스 만들기
const observer = new MutationObserver((mutations) => {
   mutations.forEach((mutation) => {
     // mutation: 감지된 내용
   })
});

(3) 인스턴스에 옵저버 등록하기

• observer인스턴스에 대상 dom과 옵션을 등록한다.
• 아래 옵션은 대상의 속성과 데이터 변화를 감지하도록 하였다.

// 3-1. 옵저버 상세 설정
const config = { 
  attributes: true, 
  characterData: true 
};

// 3-2. 인스턴스에 감시할 dom, 상세 설정 등록
observer.observe(target, config);

(4) 결과보기

• id=”target”의 배경색이 변경될 때마다 우리는 MutationRecord에 접근할 수 있다.
• 예시에서는 감지 여부를 보여주기 위해 MutationRecord를 화면에 출력해보았다.

See the Pen MutationObserver - color test by KumJungMin (@kumjungmin) on CodePen.

• MutationRecord객체의 정보는 아래와 같다.