Spec-Zone.ru › Web APIs

MutationRecord: свойство removedNodes

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

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

  • Подробнее
  • Полная совместимость
  • Отправить отзыв

Свойство MutationRecord только для чтения removedNodes представляет собой NodeList узлов, удалённых из целевого узла в результате мутации, наблюдаемой с помощью MutationObserver.

Значение

A NodeList содержащий узлы, удалённые из целевого узла в результате мутации, наблюдаемой MutationObserver.

Примеры

Наблюдение за удалёнными узлами

В следующем примере есть две кнопки: одна для добавления новых узлов в целевой узел и другая для их удаления. MutationObserver используется для наблюдения за целевым узлом на предмет изменений; при обнаружении изменения наблюдатель вызывает функцию logRemovedNodes().

Функция logRemovedNodes() проверяет, что свойство type объекта MutationRecord равно childList, что означает, что дочерние элементы целевого узла изменились. Если тип равен childlist, функция обновляет общее количество удалённых узлов. Однако обратите внимание, что нажатие кнопки «Добавить узел» не увеличит общее количество удалённых узлов, поскольку в этом случае record.removedNodes будет иметь длину 0.

HTML

<button id="add-nodes">Add a node</button>
<button id="remove-nodes">Remove a node</button>
<button id="reset">Reset</button>

<pre id="counter">Total removed nodes: 0</pre>
<div id="target"></div>

JavaScript

const addNodes = document.querySelector("#add-nodes");
const removeNodes = document.querySelector("#remove-nodes");
const reset = document.querySelector("#reset");
const counter = document.querySelector("#counter");
const target = document.querySelector("#target");
let totalRemovedNodes = 0;

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

removeNodes.addEventListener("click", () => {
  const lastChild = target.lastChild;
  if (lastChild) {
    target.removeChild(lastChild);
  }
});

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

function logRemovedNodes(records) {
  for (const record of records) {
    // Check if the childlist of the target node has been mutated
    if (record.type === "childList") {
      totalRemovedNodes = totalRemovedNodes + record.removedNodes.length;
      // Log the number of nodes added
      counter.textContent = `Total removed nodes: ${totalRemovedNodes}`;
    }
  }
}

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

Результат

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

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

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

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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API