Javascript标准DOM Range操作全集第3/3页

首先，我们需要了解DOM Range是什么。DOM Range是一种表示文档中某个区域的对象。它可以用来选择某个范围内的文本、节点或元素，并进行相关操作。

接下来，我们来详细讲解Javascript标准DOM Range操作全集第3/3页的完整攻略。

一、创建Range并进行文本操作

我们可以通过如下代码创建一个Range：

var range = document.createRange();

然后，我们可以使用Range的方法来进行文本操作。例如，我们可以使用setStart()和setEnd()方法来设置Range的起始和结束位置，然后使用deleteContents()和insertNode()方法来删除和插入内容。

示例代码：

var range = document.createRange();
var p1 = document.getElementById('p1');
var p2 = document.getElementById('p2');
range.setStart(p1.childNodes[0], 1);
range.setEnd(p2.childNodes[0], 3);
range.deleteContents();

var textNode = document.createTextNode('inserted text');
range.insertNode(textNode);

这段代码会选中p1元素的第一个子节点的第二个字符到p2元素的第一个子节点的第四个字符，并删除这段文本。然后，它会在这段文本的位置插入一个文本节点。

二、创建Range并进行Node操作

除了文本操作，Range还可以用来进行Node操作。我们可以使用extractContents()方法来提取选中的内容，然后使用createElement()等方法来创建新的节点，并使用insertNode()方法来插入这些新节点。

示例代码：

var range = document.createRange();
var p = document.getElementById('p');
range.selectNode(p);

var extractedContent = range.extractContents();

var newDiv = document.createElement('div');
newDiv.appendChild(extractedContent);

range.insertNode(newDiv);

这段代码会选中p元素，提取出它的内容，并将这些内容放入一个新的div元素中。然后，它会将这个新的div元素插入到原来的位置。

以上是Javascript标准DOM Range操作全集第3/3页的完整攻略。