MutationRecord: свойство nextSibling

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

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

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

Значение

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

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

Примеры

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

Этот код добавляет узел каждый раз при нажатии на кнопку, но добавляет его в начало целевого элемента, а не в конец. Затем наблюдатель выводит textContent nextSibling добавленного узла.

HTML

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

<pre id="log" class="log">Next 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.insertBefore(newPara, target.firstChild);
});

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

function logNextSibling(records) {
  for (const record of records) {
    if (record.type === "childList") {
      for (const newNode of record.addedNodes) {
        log.textContent = `Next sibling of added node: ${record.nextSibling?.textContent}`;
      }
    }
  }
}

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

Результат

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

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

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

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