MutationRecord#
MutationRecord.oldValue#
Właściwość oldValue zwraca poprzednią wartość z celu obserwacji. Jeśli zmiana nie obejmuje modyfikacji atrybutów lub danych tekstowych w węzłach znakowych 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 old_value = mutationRecord.oldValue;gdzie poszczególne człony oznaczają:
- old_value - łańcuch znakowy reprezentujący poprzednią wartość w celu obserwacji lub wartość
null. Wszystko jest silnie uzależnione od typu zmiany:- "
attributes" - poprzednią wartością jest wartość ze zmienionego atrybutu przed jego zmianą. - "
characterData" - poprzednią wartością są dane tekstowe ze zmienionego węzła znakowego przed jego zmianą. - "
childList" - poprzednią wartością jest wartośćnull.
- "
- mutationRecord - zapis zmian będący obiektem kontekstu.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function changeAttr(name, value, what){
var p = document.getElementsByTagName("p")[0]; // referencja do akapitu
var info = document.getElementById("info");
info.innerHTML = "";
var observer = new MutationObserver(function(records, observer){
info.innerHTML = "Zarejestrowano zmiany w atrybutach P"
+ "<br>" + "Liczba zmian records.length: " + records.length
+ "<br><br>" + "Interfejs records[0]: " + records[0]
+ "<br>" + "Typ zmiany records[0].type: " + records[0].type
+ "<br>" + "Cel zmiany records[0].target: " + records[0].target
+ "<br>" + "Brat następujący records[0].nextSibling: " + records[0].nextSibling
+ "<br>" + "Brat poprzedzający records[0].previousSibling: " + records[0].previousSibling
+ "<br><br>" + "Nazwa atrybutu records[0].attributeName: " + records[0].attributeName
+ "<br>" + "Przestrzeń nazw atrybutu records[0].attributeNamespace: " + records[0].attributeNamespace
+ "<br>" + "Stara wartość atrybutu records[0].oldValue: " + records[0].oldValue
+ "<br><br>" + "Nowa wartość atrybutu " + name + ": " + p.getAttribute(name);
});
var config = {
attributes: true,
attributeOldValue: true
};
observer.observe(p, config);
// Zmiana atrybutu dopiero po zarejestrowaniu obserwatora
if (what == "set"){
p.setAttribute(name, value);
}
if (what == "del"){
p.removeAttribute(name);
}
}
</script>
</head>
<body>
<p>Akapit bez początkowych atrybutów.</p>
<p>Kliknij konkretny przycisk by ustawić wartość określonego atrybutu w akapicie.</p>
<input type="button" value="setAttribute('id', 'Test1')" onclick="changeAttr('id', 'Test1', 'set')">
<input type="button" value="setAttribute('id', 'Test2')" onclick="changeAttr('id', 'Test2', 'set')">
<input type="button" value="setAttribute('class', 'Klasa')" onclick="changeAttr('class', 'Klasa1', 'set')">
<input type="button" value="setAttribute('class', '')" onclick="changeAttr('class', '', 'set')">
<input type="button" value="removeAttribute('class')" onclick="changeAttr('class', '', 'del')">
<p style="color: blue;">Szczegółowe informacje odczytane z obserwatora zmian:</p>
<p id="info"></p>
</body>
</html>Właściwość oldValue pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
interface MutationRecord { readonly attribute DOMString? oldValue; }
Specyfikacje i inne materiały#
Pasek społecznościowy