Range：extractContents() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 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

html

<p id="list1">123456</p>
<button id="swap">交换所选项目</button>
<p id="list2">abcdef</p>

CSS

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

结果

规范

Specification
DOM Standard # dom-range-extractcontents

浏览器兼容性

BCD tables only load in the browser

参见

DOM 接口索引