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