MutationRecord#
MutationRecord.previousSibling#
Właściwość previousSibling zwraca brata poprzedzającego dla dziecka dodanego lub usuniętego z celu obserwacji. Jeśli dziecko nie posiada brata poprzedzają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 previous_sibling = mutationRecord.previousSibling;gdzie poszczególne człony oznaczają:
- previous_sibling - referencja do brata poprzedzają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 poprzedzają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 poprzedzający jest ustalany względem pierwszego 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 poprzedzający dla zmiany records[0].previousSibling: " + records[0].previousSibling
+ "<br>" + "Dane tekstowe brata records[0].previousSibling.textContent: " + records[0].previousSibling.textContent
+ "<br>" + "Rodzic brata poprzedzającego dla zmiany records[0].previousSibling.parentNode: " + records[0].previousSibling.parentNode;
});
var config = {
attributes: true,
childList: true,
characterData: true
};
observer.observe(document.body, config);
document.body.appendChild(newDoc);
}
</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>
</body>
</html>Właściwość previousSibling pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
interface MutationRecord { readonly attribute Node? previousSibling; }