Wie kann ich DOM-Änderungen in JavaScript erkennen und darauf reagieren?

DOM-Änderungen erkennen

Sie können Änderungen am Document Object Model (DOM) mit verschiedenen Methoden erkennen.

1. MutationObserver (Moderne Browser)

const observer = new MutationObserver((mutations) => {
  // Process mutations here...
});

observer.observe(targetElement, { childList: true, subtree: true });

2. Mutationsereignisse (veraltet, aber immer noch unterstützt)

targetElement.addEventListener('DOMNodeInserted', (event) => {
  // Node added
});

targetElement.addEventListener('DOMNodeRemoved', (event) => {
  // Node removed
});

Beispiel: Eingabeaddition erkennen

Wenn Sie speziell eine Funktion ausführen möchten, wenn ein < div> oder dem HTML hinzugefügt wird, hier ein praktisches Beispiel:

const targetElement = document.getElementById('element-to-monitor');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      const addedNodes = mutation.addedNodes;

      Array.from(addedNodes).forEach((node) => {
        if (node.nodeName === 'DIV' || node.nodeName === 'INPUT') {
          // Execute your function here...
        }
      });
    }
  });
});

observer.observe(targetElement, { childList: true, subtree: true });

Das obige ist der detaillierte Inhalt vonWie kann ich DOM-Änderungen in JavaScript erkennen und darauf reagieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!