From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/nl/web/api/mutationobserver/index.html | 248 +++++++++++++++++++++++++++ 1 file changed, 248 insertions(+) create mode 100644 files/nl/web/api/mutationobserver/index.html (limited to 'files/nl/web/api/mutationobserver') diff --git a/files/nl/web/api/mutationobserver/index.html b/files/nl/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..3b2fcf7a72 --- /dev/null +++ b/files/nl/web/api/mutationobserver/index.html @@ -0,0 +1,248 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - API + - DOM + - DOM Referentie + - Geavanceerd + - NeedsContent + - NeedsUpdate + - Referentie +translation_of: Web/API/MutationObserver +--- +

{{APIRef("DOM")}}

+ +

MutationObserver biedt ontwikkelaars een manier om te reageren op veranderingen in een DOM. Het is ontworpen als een vervanging voor Mutation Events, gedefinieerd in de  DOM3 Events specificatie.

+ +

Constructor

+ +

MutationObserver()

+ +

Constructor om nieuwe DOM mutation observer instances mee aan te maken.

+ +
new MutationObserver(
+  function callback
+);
+
+ +
Parameters
+ +
+
callback
+
De functie die aangeroepen wordt bij elke DOM mutatie. De observer roept deze functie aan met twee argumenten: een array van objecten - waarvan elk object van het type {{domxref("MutationRecord")}} is - en de MutationObserver instantie zelf.
+
+ +

Instantiemethodes

+ + + + + + + + + + + + + +
void observe( {{domxref("Node")}} target, MutationObserverInit options );
void disconnect();
Array takeRecords();
+ +
+

Nota bene: {{domxref("Node")}} target moet niet verward worden met NodeJS.

+
+ +

observe()

+ +

Registreert de MutationObserver instance om notifcaties te ontvangen wanneer er DOM mutaties op de gespecificeerde node worden uitgevoerd.

+ +
void observe(
+  {{domxref("Node")}} target,
+  MutationObserverInit options
+);
+
+ +
Parameters
+ +
+
target
+
De {{domxref("Node")}} die wordt geobserveerd voor DOM mutaties.
+
options
+
Een MutationObserverInit object specificeert welke DOM mutaties gerapporteerd zouden moeten worden.
+
+ +
Nota bene: een observer toevoegen aan een element is net zoals addEventListener: als je het element meerdere keren observeert maakt het geen verschil. Dit betekent dat als je het element twee keer observeert, de observe callback functie niet twee keer wordt aangeroepen en je ook niet twee keer disconnect() hoeft aan te roepen. In andere woorden: zodra een element wordt geobserveerd, doet het opnieuw observeren met dezelfde observer instantie niets. Als het callback object echter anders is, voegt het uiteraard wel een tweede observer toe.
+ +

disconnect()

+ +

Zorgt ervoor dat de  MutationObserver instantie geen notificaties van DOM mutaties ontvangt. Totdat observe() weer is aangeroepen, wordt de callback van de observer niet aangeroepen.

+ +
void disconnect();
+
+ +

takeRecords()

+ +

Leegt de record queue van de MutationObserver instantie en returnt wat daarin zat vóór het legen.

+ +
Array takeRecords();
+
+ +
Return value
+ +

Returnt een Array van {{domxref("MutationRecord")}}s.

+ +

MutationObserverInit

+ +

MutationObserverInit is een object waarin de volgende properties gespecificeerd kunnen worden:

+ +
Nota bene: als absoluut minimum moet of childList, of attributes, of characterData true zijn. Anders wordt er een error teruggegeven met de melding: "An invalid or illegal string was specified".
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
childListtrue als toevoegingen en verwijdering van kinderen van de target node (inclusief text nodes) geobserveerd moeten worden.
attributestrue als mutaties van de attributen van de target node geobserveerd moeten worden.
characterDatatrue als mutaties van de data van de target node geobserveerd moeten worden.
subtreetrue als mutaties van niet alleen de target node, maar ook de kinderen van de target node geobserveerd moeten worden.
attributeOldValuetrue als attributes op true is gezet en de attribuutwaarde van de target node voordat de mutatie plaatsvond opgeslagen moet worden.
characterDataOldValuetrue als characterData op true is gezet en de data van de target node voordat de mutatie plaatsvond opgeslagen moet worden.
attributeFilterIs een array van lokale attribuutnamen (zonder namespace) als niet alle attribuutmutaties geobserveerd hoeven te worden.
+ +

Voorbeeldgebruik

+ +

Het volgende voorbeeld is overgenomen van deze blogpost.

+ +
// selecteer de target node
+var target = document.querySelector('#some-id');
+
+// creëer een observer instantie
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// configuratie van de observer instantie
+var config = { attributes: true, childList: true, characterData: true };
+
+// roep observe() aan op de observer instantie, en stuur de target node en de observer configuratie mee
+observer.observe(target, config);
+
+// wanneer je wilt, kun je weer stoppen met observeren
+observer.disconnect();
+
+ +

Aanvullend leesmateriaal

+ + + +

Specificaties

+ + + + + + + + + + + + + + + + + + + + + +
SpecificatieStatusCommentaar
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM4') }}
+ +

Browser compatibiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basisondersteuning18 {{property_prefix("-webkit")}}
+ 26		{{CompatGeckoDesktop(14)}}11156.0 {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basisondersteuning{{CompatUnknown}}18 {{property_prefix("-webkit")}}
+ 26		{{CompatGeckoMobile(14)}}11 (8.1)156 {{property_prefix("-webkit")}}
+ 7
+
-- cgit v1.2.3-54-g00ecf