Wie dynamisch erstellte DOM -Elemente von vorgeladenen Skripten zugegriffen und betrieben werden

In diesem Artikel wird untersucht, wie JavaScript -Skripte effektiv zugegriffen und manipuliert werden können, wenn sie vor der Erstellung von DOM -Elementen in der Webentwicklung geladen und ausgeführt werden. Wir werden drei Kernstrategien einführen: Übergeben von Elementreferenzen direkt über Funktionsrückgabewerte, verwenden benutzerdefinierte Ereignisse, um die Kommunikation zwischen Modul zu erreichen und mit MutationObserver auf Änderungen der Dom-Struktur zu hören. Diese Methoden können Entwicklern helfen, die Herausforderungen zwischen dem Timing von JavaScript-Ausführungen und dem Laden von dynamischem Inhalt zu lösen und sicherzustellen, dass das Skript anschließend Elemente ordnungsgemäß funktionieren kann, z. B. sie schleppend machen.

Das Problem verstehen: JavaScript -Ausführungszeit und dynamisches DOM

In der Entwicklung von Web-Front-End-Entwicklung ist ein gemeinsames Szenario, dass JavaScript-Skripte, die beim Laden von Seite ausgeführt werden, Operationen für Elemente erfordern, die später durch Benutzerinteraktion oder asynchrones Datenladen dynamisch zum DOM hinzugefügt werden. Das typische Dilemma ist, dass, wenn das Skript versucht, Elemente durch Methoden wie Document.GetElementById (), Dokument.GetElementsByClassName () zu erhalten, diese Abfragen zurückgeben, wenn das Zielelement noch nicht in der DOM vorhanden ist.

Betrachten Sie beispielsweise die folgenden HTML -Struktur- und JavaScript -Dateien:

 
    
      <button onclick="add_product ()">
        HINZUFÜGEN
     </button>
     <script type="text/javaScript" src="static/script1.js"> </script>
     <script type="text/javaScript" src="static/script2.js"> </script>
    

Unter ihnen ist Skript1.js dafür verantwortlich, Elemente dynamisch zu erstellen:

 // static/script1.js
Funktion add_product () {
    const add_product_div = document.createelement ("div");
    add_product_div.id = "add_product";
    add_product_div.classname = "draggable_box";
    add_product_div.innerhtml = "<h1> Hey </h1> <p> was auch immerevea </p>";
    document.body.appendChild (add_product_div);
}

Und script2.js versucht, auf diese Elemente zuzugreifen:

 // static/script2.js
const divs = document.getElementsByClassName ("Draggable_box");
console.log (divs); // Am Anfang wird eine leere HTMLCollection ausgegeben

Da script2.js ausgeführt wird, wenn die Seite geladen wird und die Funktion add_product () nur aufgerufen wird, nachdem die Schaltfläche geklickt wurde, gibt es im DOM kein Element mit dem Klassennamen draggable_box, wenn script2.js ausgeführt wird. Um dieses Problem zu lösen, benötigen wir einen Mechanismus, um script2.js oder eine andere verwandte Logik zu aktivieren, um auf Elemente nach dem Erstellen rechtzeitig zugreifen zu können.

Hier sind mehrere wirksame Lösungen.

Lösung 1: Der Funktionsrenditewert wird direkt übergeben

Die direkteste und am häufigsten verwendete Methode besteht darin, die Funktion zu haben, mit der das Element eine neu erstellte Elementreferenz erstellt. Auf diese Weise kann der Code, der die Funktion aufruft, das neue Element direkt erhalten und nachfolgende Operationen sofort ausführen.

Implementierungsmethode:

Ändern Sie die Funktion add_product, um das erstellte Div -Element zurückzugeben.

 // static/script1.js (modifiziert)
Funktion add_product () {
    const add_product_div = document.createelement ("div");
    add_product_div.id = "add_product";
    add_product_div.classname = "draggable_box";
    add_product_div.innerhtml = "<h1> Hey </h1> <p> was auch immerevea </p>";
    document.body.appendChild (add_product_div);
    return add_product_div; // Geben Sie das neu erstellte DIV -Element} zurück

Wenn add_product aufgerufen wird (z. B. im Ereignishörer der Schaltfläche), erhalten Sie diesen Rückgabewert und bedienen Sie ihn. Für eine bessere Praxis verwenden wir normalerweise AddEventListener anstelle von Inline -Onclick.

 
    
      <button id="AddProductButton">
        HINZUFÜGEN
     </button>
     <script type="text/javaScript" src="static/script1.js"> </script>
     <script type="text/javaScript" src="static/script2.js"> </script>
    

 // static/script2.js (oder an anderen geeigneten Orten)
// Angenommen, dies ist die logische Funktion, um die Produktzusatz zu verarbeiten und es zu einer draganten OnproductButtonClick () {zu machen
  const newdiv = add_product (); // Rufen Sie die Funktion auf und erhalten Sie die neu erstellte DIV
  console.log ("newdiv:", newdiv);
  // Hier können Sie beispielsweise NewDIV betreiben, um es drag- // makedRaggable (Newdiv) zu machen; // Angenommen, es gibt eine Funktion, die Elemente schleppend machen kann}

// Stellen Sie sicher, dass Ereignislistener document.adDeVentListener ('DomcontentLode', () => {
  const button = document.getElementById ('AddProductButton');
  if (button) {
    Button.AdDeVentListener ('Click', OnproductButtonClick);
  }
});

// Die hypothetische MakedRaggable -Funktion wird verwendet, um die Funktion makedRaggable (Element) {zu demonstrieren
  // Die tatsächliche Drag -Logik wird hier nur verwendet, um Element zu veranschaulichen.
  console.log (`element $ {element.id || element.className} wurde auf draggable") eingestellt;
}

Vorteile und anwendbare Szenarien:

• Einfach und intuitiv: Der Code ist klar und die Elementreferenz wird direkt übergeben.
• Direktsteuerung: Der Anrufer hat einen direkten Hinweis auf das neu erstellte Element und kann sofort arbeiten.
• Hoher Zusammenhalt: Erstellung und Erstvorgänge (z. B. Zibstobstufe) können eng kombiniert werden.
• Anwendbares Szenario: Diese Methode ist am besten zum Erstellen von Elementen anwendbar und die Logik, die auf ihnen arbeitet, befindet sich im selben Funktionsmodul oder in eng zugehörigen Funktionen.

Lösung 2: Verwenden Sie benutzerdefinierte Ereignisse, um zu kommunizieren

Die Verwendung von benutzerdefinierten Ereignissen ist eine elegante Lösung, wenn sich die Logik des Erstellens von Elementen und Betriebselementen in verschiedenen, entkoppelten Modulen befindet. Das Modul, das ein Element erstellt, kann ein Ereignis verteilen, um andere Module zu benachrichtigen, über die neue Elemente hinzugefügt wurden, während andere Module das Ereignis anhören und antworten können.

Implementierungsmethode:

Erstellen und verteilen Sie in der Funktion add_product ein benutzerdefiniertes Ereignis, das einen Verweis auf das neu erstellte Element tragen kann.

 // static/script1.js (modifiziert)
Funktion add_product () {
  const add_product_div = document.createelement ("div");
  add_product_div.id = "add_product";
  add_product_div.classname = "draggable_box";
  add_product_div.innerhtml = "<h1> Hey </h1> <p> was auch immerevea </p>";
  document.body.appendChild (add_product_div);

  // Erstellen und verteilen Sie ein benutzerdefiniertes Ereignis // Die Detaileigenschaft von CustOMEvent kann zusätzliche Daten const event = new CustOperEvent ('productAdded', {
    Detail: {
      Element: add_product_div // das neu erstellte Element als Ereignisdaten} bestehen
  });
  document.body.DispatchEvent (Ereignis); // Ereignis auf Body} entsenden

Hören Sie dann dieses benutzerdefinierte Ereignis in script2.js oder anderen Skripten an, auf die beantwortet werden müssen.

 // static/script2.js (geändert)
// Hören Sie sich das Ereignisdokument "productAdded" an.
  const newdiv = e.detail.element; // Holen Sie sich die neue Element Console.log von der Detail -Attributkonsole des Ereignisses ("erhalten die neu erstellte DIV durch das Ereignis:", Newdiv);
  // Machen Sie hier beispielsweise NewDIV.
});

// Stellen Sie sicher, dass Ereignislistener document.adDeVentListener ('DomcontentLode', () => {
  const button = document.getElementById ('AddProductButton');
  if (button) {
    Button.AdDeVentListener ('Click', add_product); // Klicken Sie auf die Schaltfläche, um add_product direkt aufzurufen
  }
});

// Die hypothetische MakedRaggable -Funktion wird verwendet, um die Funktion makedRaggable (Element) {zu demonstrieren
  Element.Style.cursor = 'Grab';
  console.log (`element $ {element.id || element.className} wurde auf Drag-Afle (über Ereignis)`) eingestellt;
}

Vorteile und anwendbare Szenarien:

• Entkopplung: Die Logik des Erstellens von Elementen und Betriebselementen ist vollständig getrennt und die Unabhängigkeit, wodurch die Modularität und Wartbarkeit des Codes verbessert wird.
• Veröffentlichung/Abonnement -Modus: Der Veröffentlichung/Abonnement -Modus wird implementiert, und ein Ereignis kann von mehreren Hörern reagiert werden, wodurch die Flexibilität des Systems verbessert wird.
• Globale Benachrichtigung: Ereignisse können auf jeden Knoten im DOM -Baum versandt und angehört werden, um eine breitere Palette von Benachrichtigungen zu erreichen.
• Anwendbares Szenario: Wenn das System aus mehreren unabhängigen Komponenten besteht, über Ereignisse kommunizieren muss oder ein Betrieb mehrere nicht verwandte Module benachrichtigen muss, sind benutzerdefinierte Ereignisse eine sehr geeignete Wahl.

Lösung Drei: Verwenden Sie MutationObserver, um auf DOM -Änderungen zu hören

MutationObServer ist eine leistungsstarke API, mit der wir auf Änderungen im DOM -Baum anhören können, einschließlich der Änderungen von Addition, Entfernung, Änderung von Eigenschaften oder Textinhalten von Knoten. Dies ist sehr nützlich für Szenarien, in denen eine allgemeine Reaktion auf dynamische Änderungen im DOM erforderlich ist.

Implementierungsmethode:

Erstellen Sie eine mutationObserver -Instanz und konfigurieren Sie sie, um Änderungen des Dokuments für untergeordnete Knoten zu hören.

 // static/script2.js (geändert)
Funktion initmutationObserver () {
  const observer = new mutationObserver ((mutationList) => {
    für (Const -Mutation der Mutationslist) {
      // Überprüfen Sie, ob neue Knoten hinzugefügt werden, wenn (mutation.type === 'Childlist' && mutation.addednodes.length> 0) {
        für (const node of mutation.addedednodes) {
          // Überprüfen Sie, ob der neu hinzugefügte Knoten der Div ist, an dem wir interessiert sind
          if (node.nodetype === node.element_node && node.classlist.contains ('driggable_box')) {
            console.log ("Entdecken Sie neu erstellte Divs durch MutationObserver:", Knoten);
            // Die neu entdeckte Div betreibe, wodurch sie drag-and-dropable // makedRaggable (Knoten) durchführt;
          }
        }
      }
    }
  });

  // Beobachter konfigurieren: Hören Sie sich Änderungen der untergeordneten Knoten des Körperelements Observer.observe an (Dokument.body, {
    Childlist: TRUE // Beobachten Sie die Hinzufügung oder Entfernung von untergeordneten Knoten // SUBTREE: TRUE // Wenn Sie tiefere DOM -Änderungen beobachten müssen, können Sie dieses Element hinzufügen});
}

// Stellen Sie sicher, dass Sie das Observer -Fenster initialisieren. // oder domcontent geladen

// static/script1.js (bleiben Sie gleich oder verwenden Sie die Originalversion)
Funktion add_product () {
  const add_product_div = document.createelement ("div");
  add_product_div.id = "add_product";
  add_product_div.classname = "draggable_box";
  add_product_div.innerhtml = "<h1> Hey </h1> <p> was auch immerevea </p>";
  document.body.appendChild (add_product_div);
}

// Stellen Sie sicher, dass Ereignislistener document.adDeVentListener ('DomcontentLode', () => {
  const button = document.getElementById ('AddProductButton');
  if (button) {
    Button.AdDeVentListener ('Click', add_product);
  }
});

// Die hypothetische MakedRaggable -Funktion wird verwendet, um die Funktion makedRaggable (Element) {zu demonstrieren
  Element.Style.cursor = 'Grab';
  console.log (`element $ {element.id || element.className} wurde auf Drag-Asable (über MutationObserver)`) eingestellt;
}

Vorteile und anwendbare Szenarien:

• Universalität: Sie können auf DOM -Veränderungen zuhören, nicht nur auf bestimmte Ereignisse.
• Nicht-invasiv: Die Logik des Erstellens von Elementen wird nicht geändert, und MutationObserver funktioniert unabhängig vom Erstellungsprozess.
• Feinkörnige Kontrolle: Sie können genau konfigurieren, welche Arten von Änderungen zu beobachten sind und welche DOM-Substree zu beobachten sind.
• Anwendbare Szenarien: MutationObserver ist die beste Wahl, wenn es erforderlich ist, auf weit verbreitete, unvorhersehbare oder dynamische Änderungen durch Bibliotheken von Drittanbietern zu reagieren oder wenn ein DOM-Überwachungstool erforderlich ist, um Universalität zu erreichen. Bei der Implementierung eines Drag-Afle-Frameworks ist MutationObserver beispielsweise sehr nützlich, wenn Sie möchten, dass alle dynamisch hinzugefügten Elemente automatisch Drag & Drop-Funktionen erhalten, unabhängig davon, wie sie erstellt werden.

Zusammenfassung und Auswahlvorschläge

Der Schlüssel zum Umgang mit der Interaktion zwischen JavaScript -Skripten und dynamischen DOM -Elementen liegt darin, die Grenzen des Skriptausführungszeitpunkts zu brechen und sicherzustellen, dass das Element bei verfügbaren verfügbaren Elementen erhalten werden kann.

• Direkter Funktionsübertragung Rückgabewert: Die einfachste und direktste, geeignet für Szenarien, in denen die Erstellung und die Betriebslogik eng gekoppelt sind. Wenn Ihre Funktion add_product ein bestimmtes Element erstellen soll, das sofort betrieben werden muss, ist dies die erste Wahl.
• Benutzerdefinierte Ereignisse: Bietet einen entkoppelten Kommunikationsmechanismus, der für Szenarien geeignet ist, in denen verschiedene Module in großen Anwendungen kooperieren müssen. Wählen Sie diese Methode aus, wenn die Operation zum Erstellen eines Elements mehrere nicht verwandte Hörer benachrichtigt muss, oder wenn Sie die Erstellungslogik von der Operationslogik trennen möchten.
• MutationObserver: Die leistungsstärkste und universellste Lösung für Szenarien, in denen dynamische Veränderungen im gesamten DOM -Baum oder bestimmte Teile davon überwacht und auf diese Veränderungen auf gemeinsame Weise reagiert werden müssen. Es ist nützlich, wenn Sie keine Kontrolle darüber haben, wie Elemente erstellt werden, oder wenn Sie alle dynamischen Elemente, die bestimmte Kriterien erfüllen, einheitlich verarbeiten müssen.

In der tatsächlichen Entwicklung kann die Auswahl der am besten geeigneten Strategie die Wartbarkeit und Robustheit des Code auf der Grundlage spezifischer Anforderungen und der Projektkomplexität erheblich verbessern.

Das obige ist der detaillierte Inhalt vonWie dynamisch erstellte DOM -Elemente von vorgeladenen Skripten zugegriffen und betrieben werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!