MutationRecord: thuộc tính previousSibling
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 previousSibling của MutationRecord là anh em trước đó của một nút con được thêm hoặc xóa tại target của một MutationObserver.
Giá trị
Nếu một nút được thêm vào hoặc xóa khỏi target của một MutationObserver, giá trị là Node đóng vai trò là anh em trước đó của nút được thêm hoặc xóa: tức là nút đứng ngay trước nó trong danh sách childNodes của nút cha.
Giá trị là null nếu không có nút nào được thêm hoặc xóa, hoặc nếu nút đó là phần tử con đầu tiên của nút cha.
Ví dụ
Ghi lại anh em trước đó của một biến đổi
Ví dụ này thêm một nút mỗi khi bạn nhấn nút. Sau đó observer ghi lại textContent của previousSibling của nút được thêm.
HTML
<button id="add-nodes">Add a node</button>
<button id="reset">Reset</button>
<pre id="log" class="log">Previous sibling of added node:</pre>
<div id="target"><p>Node #0</p></div>
JavaScript
const addNodes = document.querySelector("#add-nodes");
const reset = document.querySelector("#reset");
const target = document.querySelector("#target");
let nodeNumber = 1;
addNodes.addEventListener("click", () => {
const newPara = document.createElement("p");
newPara.textContent = `Node #${nodeNumber}`;
nodeNumber++;
target.appendChild(newPara);
});
reset.addEventListener("click", () => self.location.reload());
function logPreviousSibling(records) {
for (const record of records) {
if (record.type === "childList") {
for (const newNode of record.addedNodes) {
log.textContent = `Previous sibling of added node: ${newNode.previousSibling?.textContent}`;
}
}
}
}
const observer = new MutationObserver(logPreviousSibling);
observer.observe(target, { childList: true });
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| DOM # ref-for-dom-mutationrecord-previoussibling② |