Запись о мутации: свойство previousSibling

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

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

Свойство MutationRecord только для чтения previousSibling — это предыдущий брат добавленного или удаленного дочернего узла target в MutationObserver.

Значение

Если узел добавляется или удаляется из target в MutationObserver, значением является Node, являющимся предыдущим братом добавленного или удалённого узла: то есть узел, непосредственно предшествующий этому в списке childNodes родителя.

Значение равно null если не было добавленных или удаленных узлов, или если узел является первым дочерним элементом своего родителя.

Примеры

Вывести предыдущего брата мутации

Этот код добавляет узел каждый раз при нажатии на кнопку. Затем наблюдатель записывает textContent previousSibling добавленного узла.

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 });

Результат

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

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

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

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