MutationRecord#

MutationRecord.addedNodes#

Właściwość addedNodes zwraca kolekcję typu NodeList ze wszystkimi dziećmi dodanymi do celu obserwacji. Jeśli zmiana nie dotyczy dodawania 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:

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

gdzie poszczególne człony oznaczają:

Żeby uzyskać kolekcję węzłową z wieloma dziećmi należy dodać do obserwowanego węzła nowe węzły za pomocą jednego kompleksowego polecenia, np. wykorzystując fragment dokumentu lub właściwość Element.innerHTML.

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 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].addedNodes: " + records[0].addedNodes
					+ "<br>" + "Liczba dodanych węzłów records[0].addedNodes.length: " + records[0].addedNodes.length;

			});

			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ść addedNodes 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 {
	[SameObject] readonly attribute NodeList addedNodes;
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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