JavaScript에서 MutationObserver API를 사용하여 DOM 요소의 변경 사항을 수신하는 방법은 무엇입니까?

Originally posted here!

돌연변이 관찰자란 무엇입니까?

Mutation Observer는 DOM의 요소에 대한 변경 사항을 수신하고 그에 따라 반응하는 데 도움이 되는 DOM API입니다.

Mutation Observer API를 사용하여 청취하는 방법은 무엇입니까?

DOM의 특정 요소를 먼저 관찰하거나 수신하려면 MutationObserver 를 만들어야 합니다.

// make mutation observer
const observer = new MutationObserver();

여기에서 MutationObserver() 생성자 함수 내부에 콜백 함수를 전달해야 합니다. 이 콜백 함수는 해당 요소가 변경될 때마다 실행되기 때문입니다.

// make mutation observer
// and passing a callback function
// this callback function is triggered
// whenever there is a chnage to the element
const observer = new MutationObserver((event) => {
  console.log(event);
});

예, 돌연변이 관찰자에게 어떤 요소가 변경 사항을 찾아야 하는지 말하지 않았다는 것을 압니다.

그것이 우리가 다음 단계에서 할 일입니다.

관찰자에게 요소를 첨부하려면 observe() 객체에서 observer 메서드를 사용해야 합니다.

// make mutation observer
// and pass a callback function
// this callback function is triggered
// whenever there is a chnage to the element
const observer = new MutationObserver((event) => {
  console.log(event);
});

// get reference to the h1 tag
const h1 = document.querySelector("h1");

// attach an h1 element tag to the observer
// to look for changes
observer.observe(h1);

observe() 메서드는 DOM 요소에 대한 유효한 참조를 첫 번째 인수로 허용합니다.

두 번째 인수로 구성 개체를 허용합니다. - 구성 객체는 관찰자에게 지정된 요소에서 관찰할 변경 유형을 알려주는 데 사용됩니다. 우리의 경우 h1 태그가 있고 속성 변경, 목록 변경과 같은 변경 사항을 찾고 싶습니다. h1 태그 안의 자식 수와 h1 태그의 하위 트리 변경 사항.
구성 개체는 다음과 같습니다.

const config = {
  attributes: true,
  childList: true,
  subtree: true,
};

이 구성 개체를 관찰자에게 전달해 보겠습니다.

// make mutation observer
// and pass a callback function
// this callback function is triggered
// whenever there is a chnage to the element
const observer = new MutationObserver((event) => {
  console.log(event);
});

// get reference to the h1 tag
const h1 = document.querySelector("h1");

// attach an h1 element tag to the observer
// to look for changes
const config = {
  attributes: true,
  childList: true,
  subtree: true,
};
observer.observe(h1, config);

이제 관찰자는 준비되어 변경 사항을 찾고 지정된 구성에 변경 사항이 있을 때마다 관찰자는 콜백 함수를 호출하고 세부 정보는 콜백 함수로 전달됩니다.

😃 유용하셨다면 공유해 주세요.