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
属性也会被克隆,因此如果提取部分选择的节点并将其附加到文档中,可能会导致文档无效。
部分选中的节点会被克隆,以包含使文档片段有效所需的父标签。
语法
js
extractContents()
参数
无。
返回值
DocumentFragment
对象。
示例
基本示例
js
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
js
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 # dom-range-extractcontents |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
extractContents |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.