MutationObserver란? DOM 변화 감지 방법

살펴보기

DOM은 웹페이지의 구조와 내용을 나타내는 트리 구조입니다. 개발자는 DOM을 통해 웹페이지의 요소를 추가, 삭제, 변경할 수 있습니다. 이러한 DOM의 변화는 이벤트를 통해 감지할 수 있습니다.
MutationObserver는 DOM의 변화를 주기적으로 감시하는 API입니다. 이를 통해 개발자는 DOM의 변경을 실시간으로 감지하고, 그에 따라 동적으로 페이지를 업데이트할 수 있습니다.

 

특징

1. MutationObserver는 다음과 같은 특징을 가지고 있습니다.

• DOM의 모든 변경을 감지할 수 있습니다.
• 특정 요소의 변경만 감지할 수 있습니다.
• 변경의 종류를 구분하여 감지할 수 있습니다.

2. MutationObserver를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

• 입력 양식의 데이터 변경을 감지하여 실시간으로 값을 표시합니다.
• 리스트의 요소 추가/삭제를 감지하여 페이지를 동적으로 업데이트합니다.
• DOM의 스크롤 위치 변경을 감지하여 페이지를 반응형으로 만듭니다.

활용하기

MutationObserver를 사용하려면 다음과 같은 단계를 거칩니다.

1. MutationObserver 객체를 생성합니다.
2. MutationObserver에 콜백 함수를 등록합니다.
3. MutationObserver를 시작합니다.

// MutationObserver 객체를 생성합니다.
const observer = new MutationObserver((mutations) => {
  // 콜백 함수에서 변경 사항을 처리합니다.
  console.log(mutations);
});

// MutationObserver에 콜백 함수를 등록합니다.
observer.observe(document.querySelector(".target-element"), {
  // 변경을 감지할 요소를 지정합니다.
  subtree: true,
  // 변경의 종류를 지정합니다.
  attributes: true,
  childList: true,
  characterData: true,
});

// MutationObserver를 시작합니다.
observer.start();

이 예제에서는 ".target-element" 요소의 변경을 감지합니다. 변경 사항은 콜백 함수에서 처리됩니다.
MutationObserver는 DOM의 변화를 감지하는 데 유용한 API입니다. 이를 활용하면 다양한 작업을 수행할 수 있습니다.

다음 글

2023.09.25 - [Frontend development/JavaScript] - MutationObserver로 클릭 이벤트 감지하기

MutationObserver로 클릭 이벤트 감지하기