DOM 속성 변경을 감지하고 대응하는 방법: MutationObserver와 레거시 메서드?

DOM 속성 변경 시 이벤트 트리거

많은 시나리오에서는 이미지의 소스가 변경되거나 div의 HTML이 변경되는 경우와 같이 DOM 속성의 변경 사항을 감지해야 합니다. 콘텐츠 업데이트. 이 기능에 대한 브라우저 지원은 시간이 지남에 따라 발전했습니다.

DOM Mutation Events(Legacy)

과거에는 DOM Mutation Events가 속성 변경을 수신하는 방법을 제공했습니다. 이러한 이벤트에는 다음이 포함됩니다.

• DOMAttrModified
• DOMNodeInserted
• DOMNodeRemoved

그러나 DOM 돌연변이 이벤트에 대한 브라우저 지원은 일관성이 없었습니다.

MutationObserver API

DOM Mutation Events를 대체하기 위해 MutationObserver API가 도입되었습니다. MutationObserver는 DOM 속성 및 DOM의 다른 측면의 변경을 감지하는 보다 강력하고 널리 지원되는 방법을 제공합니다.

MutationObserver를 사용하면 관찰자 인스턴스를 생성하고 모니터링하려는 변경 유형을 지정할 수 있습니다. DOM에서 일치하는 변경 사항이 발생하면 관찰자가 이를 알려줍니다.

다음은 MutationObserver를 사용하여 이미지 소스 속성의 변경 사항을 감지하는 방법에 대한 예입니다.

<code class="javascript">// Create an observer instance
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    // Check if the mutation is for the "src" attribute
    if (mutation.attributeName === "src") {
      // Do something in response to the source change
    }
  }
});

// Start observing the specified target node
observer.observe(image, { attributes: true, attributeFilter: ["src"] });</code>

이 예에서는 , 관찰자는 이미지 노드의 src 속성을 감시하도록 구성되며 해당 속성이 변경될 때마다 지정된 콜백을 호출합니다.

jQuery Mutation Events Plugin

jQuery를 다시 사용하면 MutationObserver 대신 Mutation Events 플러그인을 활용할 수 있습니다. 이 플러그인은 DOM 속성 변경을 처리하기 위한 단순화된 인터페이스를 제공하며 특정 속성 변경에만 관심이 있는 경우 유용할 수 있습니다.

<code class="javascript">$(image).on("DOMAttrModified", (event) => {
  if (event.attrName === "src") {
    // Do something in response to the source change
  }
});</code>

MutationObserver 또는 jQuery Mutation Events 플러그인을 활용하면 변경 사항을 효과적으로 감지할 수 있습니다. DOM 속성에 추가하고 이러한 변경 사항에 따라 맞춤 작업을 실행합니다.

위 내용은 DOM 속성 변경을 감지하고 대응하는 방법: MutationObserver와 레거시 메서드?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!