MutationRecord#

MutationRecord.attributeName#

Właściwość attributeName zwraca nazwę lokalną zmienionego atrybutu w celu obserwacji. Jeśli zmiana nie dotyczy atrybutów 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:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
var attr_name = mutationRecord.attributeName;

gdzie poszczególne człony oznaczają:

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!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ść attributeName pojawia się dopiero w specyfikacji DOM4.

Składnia Web IDL#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
interface MutationRecord {
	readonly attribute DOMString? attributeName;
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

MutationRecord (H1) MutationRecord.attributeName (H2) Opis działania (H3) Składnia Web IDL (H3) Specyfikacje i inne materiały (H3)