MutationObserver
페이지를 구성할 때 페이지의 요소(리스트)의 변경, 추가, 제거 등 이벤트를 감지하고 그에 맞는 함수를 추가하고 싶을 때가 있습니다. 예를 들어 상품을 보여주는 페이지를 구성 후 다음 페이지로 넘어가기 위해 ajax, axios 등 비동기 통신으로 값을 변경할 경우 기존 onload, redy 등에서 등록했던 객체의 이벤트 리스너들이 사라지거나 오류를 발생하는 현상이 있습니다.
오류까지는 아니지만 원하는 결과가 아니기에 다시 onload, redy에 사용했던 함수를 불러와 적용 시킬 수 있지만 다른 ajax나, axios 등 추가 함수를 만들게 된다면 그 때 마다 해당 함수를 추가해줘야하는 번거로움이 있습니다.
See the Pen observer before by 정재준 (@ihistdxo-the-builder) on CodePen.
observer를 이용한다면 추후에 리스트 수정에 있어 유지 보수가 더 용이하다는 장점이 있습니다.
또한, Observer 메서드를 사용하면 별도의 라이브러리 없이 보다 쉽게 구현할 수 있습니다. 간단하게 Observer에 대해 설명하면 객체나 요소의 변경을 감지하고 이를 알려주는 역활을 합니다. JavaScript에서 opserver는 총 5개로 구성되어 있고 이번 포스팅에서는 MutationObserver를 설명하고 사용할 것입니다.
Observer 종류
- IntersectionObserver: 요소들이 특정 요소나 뷰포트와 교차하는지를 감지
- MutationObserver: 요소의 추가, 삭제, 속성 변경 등의 DOM 변화를 실시간으로 감지
- PerformanceObserver: 웹 페이지의 로딩 시간, 자원 사용량, 네트워크 상황 등과 관련된 성능 정보를 수집
- ReportingObserver: 다양한 이벤트와 네트워크 상황에 관련된 보고서를 생성하고 전송하는 기능
- ResizeObserver: 요소의 너비 또는 높이가 변경되었을 때 이를 실시간으로 감지
MutationObserver 메서드
disconnect() | DOM 변경 감지 종료 |
observe() | DOM 변경 감지 시작 |
takeRecords() | 등록된 옵저버를 제거하고 새 array 개체로 반환. |
MutationObserver 사용법
// 변경을 탐지할 대상(요소)
const target = document.getElementById("target");
// 감지할 옵션
const config = { attributes: true, childList: true, subtree: true };
// 변경 감지 시 실행할 콜백 함수
const callback = (mutationList, observer) => {
for (const mutation of mutationList) {
if (mutation.type === "childList") {
console.log("자식 노드가 추가되거나 제거됐습니다.");
} else if (mutation.type === "attributes") {
console.log(`${mutation.attributeName} 특성이 변경됐습니다.`);
}
}
};
// 콜백 함수에 연결된 감지기 인스턴스 생성
const observer = new MutationObserver(callback);
// 설정한 변경의 감지 시작
observer.observe(targetNode, config);
// 이후 감지 중단 가능
observer.disconnect();
또는
// 리스트의 내용 변경을 감지
observer.observe(document.querySelector('#listArea'), {
attributes: true,
childList: true,
characterData: true
});
const observer = new MutationObserver(() => {
// 감지 후 실행할 함수
})
Example
See the Pen observer after by 정재준 (@ihistdxo-the-builder) on CodePen.
Option 종류
속성 | 값 | 설명 |
subtree | True / False | 대상의 하위 트리 전체를 감시합니다. |
childList | True / False | 대상의 하위 요소의 추가 및 제거를 감시합니다. (하위 리스트 감시) |
attributes | True / False | 대상의 특성 변경을 감시합니다. (다른 attribute 옵션을 준다면 기본값 true) |
attributeFilter | [ "A", "B" ] | 변경을 감지할 특성 이름의 배열입니다. 이 속성을 지정하지 않으면 모든 특성의 변경이 알림을 생성합니다. |
attributeOldValue | True / False | 대상의 특성 변경을 감지했을 때 해당 특성이 바뀌기 전 값을 기록합니다. |
characterData | True / False | 대상 내의 텍스트가 바뀌는 것을 감지합니다. subtree가true면 자손들의 텍스트 변경도 감지 (characterDataOldValue 가 지정된 경우 기본값 true) |
characterDataOldValue | True / False | 대상의 텍스트 변경을 감지했을 때 바뀌기 전의 텍스트를 기록합니다. |
출처 : https://developer.mozilla.org/ko/docs/Web/API/MutationObserver
MutationObserver - Web API | MDN
MutationObserver 인터페이스는 DOM 트리의 변경을 감지하는 기능을 제공합니다. DOM3 이벤트 명세의 일부였던 Mutation Events (en-US)를 대체합니다.
developer.mozilla.org
'Dev > WEB' 카테고리의 다른 글
[JS] URL에서 파라미터, get, path 등 가져오기 (0) | 2023.07.28 |
---|---|
[JS] scrollIntoView 해당 요소로 Focus하기, 해당 요소로 스크롤 하기 (0) | 2023.07.28 |
[Fullcalendar] 라이브러리 이용해서 달력 만들기, 사용법 정리 (0) | 2023.07.26 |
[http-server] HTML 테스트를 위한 웹 서버 띄우기 (빠르게) (0) | 2023.07.15 |
[CSS] Web font 적용 (with. Apple SD Gothic Neo) (0) | 2023.06.29 |