MutationRecord: свойство target

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Чтение только свойство MutationRecord target является целевым объектом (т.е. мутировавшим/изменённым узлом) изменения, наблюдаемого с помощью MutationObserver.

Значение

Node, на который повлияла мутация.

Если тип записи type равен attributes, это Element, атрибуты которого изменились.
Если тип записи type равен characterData, это узел CharacterData.
Если тип записи type равен childList, это Node, чьи дочерние элементы изменились.

Примеры

Вывод целевого объекта мутации

В следующем примере есть два div: красный div (#red-div) и синий div (#blue-div), внутри контейнерного div #container. Создан MutationObserver для наблюдения за контейнером. Наблюдатель отслеживает изменения списка дочерних элементов, а также subtree: true, поэтому он будет наблюдать изменения в дочерних элементах дочерних элементов контейнера.

Обработчик событий наблюдателя выводит target записи о мутации. При добавлении узлов в #red-div или #blue-div, target будет #red-div или #blue-div, соответственно.

HTML

<pre id="log">Target of mutation:</pre>
<button id="add-nodes-to-red-div">Add a node to red div</button>
<button id="add-nodes-to-blue-div">Add a node to blue div</button>
<button id="reset">Reset</button>
<div id="container">
  <div id="red-div"></div>
  <div id="blue-div"></div>
</div>

JavaScript

const container = document.querySelector("#container");
const redDiv = document.querySelector("#red-div");
const blueDiv = document.querySelector("#blue-div");
const addToRed = document.querySelector("#add-nodes-to-red-div");
const addToBlue = document.querySelector("#add-nodes-to-blue-div");
const reset = document.querySelector("#reset");
const log = document.querySelector("#log");

addToRed.addEventListener("click", () => {
  const newPara = document.createElement("p");
  newPara.textContent = `Current time: ${Date.now()}`;
  redDiv.appendChild(newPara);
});

addToBlue.addEventListener("click", () => {
  const newPara = document.createElement("p");
  newPara.textContent = `Current time: ${Date.now()}`;
  blueDiv.appendChild(newPara);
});

reset.addEventListener("click", () => self.location.reload());

function logMutationTarget(records) {
  for (const record of records) {
    log.textContent = `Target of mutation: ${record.target.id}`;
  }
}

const observer = new MutationObserver(logMutationTarget);
observer.observe(container, { childList: true, subtree: true });

Результат

Спецификации

Спецификация
DOM # ref-for-dom-mutationrecord-target②

Совместимость браузеров

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`target`	16	12	14	15	7	18	14	14	7	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord/target