MutationRecord#
MutationRecord.removedNodes#
Właściwość removedNodes zwraca kolekcję typu NodeList ze wszystkimi dziećmi usuniętymi z celu obserwacji. Jeśli zmiana nie dotyczy usuwania dzieci to zwrócona zostanie pusta kolekcja. Właściwość jest tylko do odczytu.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var removed_nodes = mutationRecord.removedNodes;gdzie poszczególne człony oznaczają:
- removed_nodes - kolekcja węzłowa z dziećmi usuniętymi z celu obserwacji.
- mutationRecord - zapis zmian będący obiektem kontekstu.
Żeby uzyskać kolekcję węzłową z wieloma dziećmi należy usunąć z obserwowanego węzła stare węzły za pomocą jednego kompleksowego polecenia, np. wykorzystując właściwość Element.innerHTML.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function delAllChild(method){
var observer = new MutationObserver(function(records, observer){
var info = document.getElementById("info");
info.innerHTML = "Zarejestrowano zmiany węzła DIV"
+ "<br>" + "Liczba zmian records.length: " + records.length
+ "<br><br>" + "Interfejs records[0].removedNodes: " + records[0].removedNodes
+ "<br>" + "Liczba usuniętych węzłów records[0].removedNodes.length: " + records[0].removedNodes.length;
});
var config = {
attributes: true,
childList: true,
characterData: true
};
var contener = document.getElementById("contener");
observer.observe(contener, config);
// Kompleksowa zmiana - wiele węzłów na raz
if (method == "inner"){
contener.innerHTML = "";
}
// Pojedyncza zmiana - jeden węzeł na raz
if (method == "loop"){
while (contener.lastChild){
contener.removeChild(contener.lastChild);
}
}
}
</script>
</head>
<body>
<div id="contener">
<p>Do kontenera DIV dodawany jest obserwator zmian z DOM4.</p>
<p>Drugi akapit w kontenerze.</p>
<p>Trzeci akapit w kontenerze.</p>
</div>
<p>Kliknij konkretny przycisk by usunąć wszystkie dzieci z kontenera DIV.</p>
<input type="button" value="div.innerHTML=''" onclick="delAllChild('inner')">
<input type="button" value="while" onclick="delAllChild('loop')">
<p style="color: blue;">Szczegółowe informacje odczytane z obserwatora zmian:</p>
<p id="info"></p>
</body>
</html>W powyższym przykładzie celowo zastosowałem dwa różne sposoby usuwania węzłów, żeby pokazać różnice między pojedynczą a kompleksową modyfikacją przy obserwowaniu zmian. W pierwszym wariancie polecenie innerHTML="" w jednym kroku kasuje wszystkie węzły w kontenerze, dlatego w funkcji zwrotnej udostępniana jest kolejka zapisu z jednym zapisem zmian, z którego możemy pobrać wszystkie usunięte węzły (siedem). W drugim wariancie pętla while przebiega po wszystkich dzieciach w kontenerze i usuwa je pojedynczo, dlatego tworzonych jest siedem zapisów zmian, z których możemy pobrać pojedynczy węzeł.
Właściwość removedNodes pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
interface MutationRecord { [SameObject] readonly attribute NodeList removedNodes; }