MutationRecord#
MutationRecord.nextSibling#
Właściwość nextSibling zwraca brata następującego dla dziecka dodanego lub usuniętego z celu obserwacji. Jeśli dziecko nie posiada brata następującego lub zmiana nie dotyczy dodawania lub usuwania dzieci to zwrócona zostanie wartość null. 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 next_sibling = mutationRecord.nextSibling;gdzie poszczególne człony oznaczają:
- next_sibling - referencja do brata następującego dla dodanego/usuniętego dziecka w celu obserwacji lub wartość
null. - mutationRecord - zapis zmian będący obiektem kontekstu.
Dla ułatwienia można założyć, że brat następujący zapisywany jest przed wykonaniem zmian w celu obserwacji (przy usuwaniu węzłów) lub po wykonaniu zmian w celu obserwacji (przy dodawaniu węzłów). Jeśli zmiana obejmuje dodanie lub usunięcie wielu dzieci w jednym kroku, to brat następujący jest ustalany względem ostatniego dodawanego lub usuwanego dziecka.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function addElement(localName){
var newDoc = document.createDocumentFragment(); // operujemy fragmentem dokumentu
var newElement1 = document.createElement(localName);
newElement1.textContent = "Treść nowego elementu " + newElement1.tagName + " (dziecko1).";
newDoc.appendChild(newElement1);
if (localName == "DIV"){
var newElement2 = document.createElement(localName);
newElement2.textContent = "Treść nowego elementu " + newElement2.tagName + " (dziecko2).";
newDoc.appendChild(newElement2);
var newElement3 = document.createElement("b");
newElement3.textContent = " Treść nowego elementu " + newElement3.tagName + " (potomek w dziecko2).";
newElement2.appendChild(newElement3);
}
var observer = new MutationObserver(function(records, observer){
var info = document.getElementById("info");
info.innerHTML = "Zarejestrowano zmiany węzła BODY"
+ "<br>" + "Liczba zmian records.length: " + records.length
+ "<br><br>" + "Interfejs records[0]: " + records[0]
+ "<br>" + "Brat następujący dla zmiany records[0].nextSibling: " + records[0].nextSibling
+ "<br>" + "Dane tekstowe brata records[0].nextSibling.data: " + records[0].nextSibling.data
+ "<br>" + "Rodzic brata następującego dla zmiany records[0].nextSibling.parentNode: " + records[0].nextSibling.parentNode;
});
var config = {
attributes: true,
childList: true,
characterData: true
};
observer.observe(document.body, config);
// Nowe węzły dodawane są przed ostatnim dzieckiem w BODY
document.body.insertBefore(newDoc, document.body.lastChild);
}
</script>
</head>
<body>
<p>Do ciała dokumentu (BODY) dodawany jest obserwator zmian z DOM4.</p>
<p>Kliknij konkretny przycisk by utworzyć i dodać nowe elementy do dokumentu.</p>
<input type="button" value="createElement('p')" onclick="addElement('p')">
<input type="button" value="createElement('DIV')" onclick="addElement('DIV')">
<p style="color: blue;">Szczegółowe informacje odczytane z obserwatora zmian:</p>
<p id="info"></p>
<p style="color: blue;">Nowe elementy dodane do dokumentu:</p>
Ostatnie dziecko w BODY jest węzłem tekstowym.
</body>
</html>Właściwość nextSibling pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
interface MutationRecord { readonly attribute Node? nextSibling; }