MutationRecord: свойство type

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

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

Чтение-только свойство MutationRecord type — тип MutationRecord, наблюдаемого MutationObserver.

Значение

Свойство установлено в тип мутации в виде строки. Значение может быть одним из следующих:

attributes если мутация была изменением атрибута.
characterData если это изменение узла типа CharacterData.
childList если мутация затронула дерево узлов.

Примеры

Вывод типа мутации

В следующем примере вы найдете две кнопки для манипулирования DOM. Первая кнопка добавляет новый узел в пример, а вторая изменяет атрибут color всех добавленных узлов. Создается MutationObserver для наблюдения за этим, и наблюдатель настроен на вывод type записи мутации в #log.

Вы заметите, что при добавлении узла type — childList, а при изменении атрибута color — type — attributes.

HTML

<button id="add-nodes">Add a node</button>
<button id="set-attribute">Change the color</button>

<button id="reset">Reset</button>

<pre id="log">Mutation type:</pre>
<div id="target"><p>Node #0</p></div>

JavaScript

const addNodes = document.querySelector("#add-nodes");
const setAttribute = document.querySelector("#set-attribute");
const reset = document.querySelector("#reset");
const log = document.querySelector("#log");
const target = document.querySelector("#target");
let nodeNumber = 1;

addNodes.addEventListener("click", () => {
  const newPara = document.createElement("p");
  newPara.textContent = `Node #${nodeNumber}`;
  nodeNumber++;
  target.appendChild(newPara);
});

setAttribute.addEventListener("click", () => {
  if (target.getAttribute("class") === "red") {
    target.setAttribute("class", "blue");
  } else {
    target.setAttribute("class", "red");
  }
});

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

function logMutationType(records) {
  for (const record of records) {
    log.textContent = `Mutation type: ${record.type}`;
  }
}

const observer = new MutationObserver(logMutationType);
observer.observe(target, { childList: true, attributes: true, subtree: true });

Результат

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

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

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`type`	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/type