MutationRecord: thuộc tính removedNodes

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thuộc tính chỉ đọc removedNodes của MutationRecord là một NodeList chứa các nút đã bị xóa khỏi nút đích bởi một biến đổi được quan sát bằng MutationObserver.

Giá trị

Một NodeList chứa các nút bị xóa khỏi đích của biến đổi được MutationObserver quan sát.

Trong ví dụ sau, có hai nút bấm: một để thêm các nút mới vào nút đích, và một để xóa chúng. Một MutationObserver được dùng để quan sát các thay đổi của nút đích; khi phát hiện thay đổi, observer gọi một hàm logRemovedNodes().

Hàm logRemovedNodes() kiểm tra xem type của MutationRecord có phải là childList hay không, nghĩa là các phần tử con của nút đích đã thay đổi. Nếu kiểu là childList, hàm sẽ cập nhật tổng số nút đã bị xóa. Tuy nhiên, lưu ý rằng khi nhấn nút "Add a node" thì tổng số nút đã bị xóa sẽ không tăng, vì trong trường hợp này record.removedNodes sẽ có độ dài là 0.

HTML

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>

#counter {
  border: 1px dotted black;
  padding: 0.5rem;
}

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) {
    // Kiểm tra xem childList của nút đích có bị biến đổi hay không
    if (record.type === "childList") {
      totalRemovedNodes += record.removedNodes.length;
      // Ghi lại số nút đã thêm
      counter.textContent = `Total removed nodes: ${totalRemovedNodes}`;
    }
  }
}

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