Range：extractContents() 方法

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 接口索引