Диапазон: метод extractContents()

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

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

Метод Range.extractContents() перемещает содержимое Range из дерева документа в DocumentFragment.

Обработчики событий, добавленные с помощью DOM-событий, не сохраняются при извлечении. События атрибутов HTML сохраняются или дублируются так же, как и для метода Node.cloneNode(). Атрибуты HTML id также клонируются, что может привести к некорректности документа, если частично выбранный узел извлекается и добавляется в документ.

Частично выбранные узлы клонируются, чтобы включить необходимые родительские теги для валидности фрагмента документа.

Синтаксис

extractContents()

Параметры

Нет.

Возвращаемое значение

Объект DocumentFragment.

Примеры

Базовый пример

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const documentFragment = range.extractContents();
document.body.appendChild(documentFragment);

Перемещение элементов между контейнерами

Этот пример позволяет перемещать элементы между двумя контейнерами. Выберите один или несколько элементов, а затем нажмите «обменять», чтобы переместить их в противоположный контейнер.

HTML

<p id="list1">123456</p>
<button id="swap">Swap selected item(s)</button>
<p id="list2">abcdef</p>

CSS

body {
  pointer-events: none;
}

p {
  border: 1px solid;
  font-size: 2em;
  padding: 0.3em;
}

button {
  font-size: 1.2em;
  padding: 0.5em;
  pointer-events: auto;
}

JavaScript

const list1 = document.getElementById("list1");
const list2 = document.getElementById("list2");
const button = document.getElementById("swap");

button.addEventListener("click", (e) => {
  const selection = window.getSelection();

  for (let i = 0; i < selection.rangeCount; i++) {
    const range = selection.getRangeAt(i);

    if (
      range.commonAncestorContainer === list1 ||
      range.commonAncestorContainer.parentNode === list1
    ) {
      const documentFragment = range.extractContents();
      list2.appendChild(documentFragment);
    } else if (
      range.commonAncestorContainer === list2 ||
      range.commonAncestorContainer.parentNode === list2
    ) {
      const documentFragment = range.extractContents();
      list1.appendChild(documentFragment);
    }
  }
});

Результат

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

Спецификация
DOM # dom-range-extractcontents

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`extractContents`	1	12	1	9	1	18	4	10.1	1	1.0	4.4

См. также

Индекс интерфейсов DOM

© 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/Range/extractContents