eine ID mit einem Event verknüpfen

[Vb1988]

Hallo, ich möchte ein DIV Element auf einer Webseite überwachen :

MeinEle=document.getElementById("gift-overlay").item(0).childNodes.length

"MeinEle" hat normalerweise eine "childNodes.length" von "25", und "childNodes.length" ändert sich gelegentlich auf den Wert "29" . Frage: kann man ohne Timer/SettimeOut/Setinterval eine Art Überwachung für "MeinEle" einrichten, sodass ein Event mit einer MessageBox "Hello World" abgefeuert wird, wenn sich "childNodes.length" von 25 auf 29 ändert?

Ich habe im Netz ein Beispiel gefunden, wie man eine ID mit einem Event verknüpft, aber leider scheint das Beispiel nicht exakt das zu sein, was ich brauche.

eine ID mit einem Event verknüpfen:

var myObject = document.getElementById("myObject"); myObject.onclick = function() {alert("Hello World")};

[Orlok]

Hallo

Die Anzahl der Kindknoten des Elementes wird sich ja nicht auf magische Art und Weise von selbst ändern, weshalb es vermutlich eine bessere Lösung als die hier vorgestellte gibt, um auf die Änderungen zu reagieren.

const element = document.getElementById('name');

const observer = new MutationObserver(function (records, observer) {
  console.log('Hello World');
});

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

const text = document.createTextNode('string');

element.appendChild(text); // Hello World

Mit MutationObservern ist es jedenfalls möglich, DOM-Nodes zu überwachen. Dem Konstruktor wird dabei eine Callback-Funktion übergeben, die bei einer Änderung automatisch aufgerufen wird, ähnlich wie bei der Behandlung von gewöhnlichen Ereignissen.

Um die Überwachung zu starten ist die Methode observe der MutationObserver-Instanz mit zwei Argumenten aufzurufen. Das erste Argument ist eine Referenz auf das Element das überwacht werden soll, das zweite ist ein Objekt, über dessen Eigenschaften festgelegt werden kann, auf welche Art von Veränderungen reagiert werden soll.

Letzteres ist in deinem Beispiel die Liste der Kindknoten des Elements, weshalb hier die Eigenschaft childList des Konfigurationsobjektes auf true zu setzen wäre.

Wird nun wie in dem Beispiel oben ein Element oder ein Textknoten hinzugefügt oder entfernt, dann wird die Callback-Funktion aufgerufen, in der ich hier nur den Hallo-Welt-Text ausgeben lasse.

Hier könntest du dann die Eigenschaft length von childNodes überprüfen und die Ausgabe von der nun aktuellen Anzahl der Kindknoten abhängig zu machen.

Eine etwas ausführliche Beschreibung findest du hier. Aber wie gesagt, es gibt womöglich eine bessere Lösung für das Problem. Dafür müsstest du allerdings etwas genauer beschreiben worum es geht.

Gruß,

Orlok