var p1 = document.getElementById("p1"); var helloNode = p1.firstChild.firstChild; var worldNode = p1.lastChild; var range = document.createRange(); range.setStart(helloNode, 2); range.setEnd(worldNode, 3); range.deleteContents();
执行以上代码后，页面中会显示如下HTML代码
<p><b>He</b>rld!</p>
由于范围选区在修改底层DOM结构时能够保证格式良好，因此即使内容被删除了，最终的DOM结构依旧是格式良好的
【extractContents()】
与deleteContents()方法相似，extractContents()方法也会从文档中移除范围选区。但区别在于，extractContents()会返回范围的文档片段。利用这个返回的值，可以将范围的内容插入到文档中的其他地方。如下所示：
var p1 = document.getElementById("p1"); var helloNode = p1.firstChild.firstChild; var worldNode = p1.lastChild; var range = document.createRange(); range.setStart(helloNode, 2); range.setEnd(worldNode, 3); var fragment = range.extractContents(); p1.parentNode.appendChild(fragment);
在这个例子中，将提取出来的文档片段添加到了文档<body>元素的末尾
[注意]在将文档片段传入appendChild()方法中时，添加到文档中的只是片段的子节点，而非片段本身
<p><b>He</b>rld!</p> <b>llo</b> wo
【cloneContents】
还有一种做法是使用cloneContents()创建范围对象的一个副本，然后在文档其他地方插入该副本
var p1 = document.getElementById("p1"); var helloNode = p1.firstChild.firstChild; var worldNode = p1.lastChild; var range = document.createRange(); range.setStart(helloNode, 2); range.setEnd(worldNode, 3); var fragment = range.cloneContents(); p1.parentNode.appendChild(fragment);
这个方法与extractContents()非常类似，因为它们都返回文档片段。它们的主要区别在于，cloneContents()返回的文档片段包含的是范围中节点的副本，而不是实际的节点。执行上面的操作后，页面中的HTML代码如下所示：
<p><b>Hello</b> world!</p> <b>llo</b> wo
[注意]在调用cloneContents()方法之前，拆分的节点并不会产生格式良好的文档片段。换句话说，原始的HTML在DOM被修改之前会始终保持不变
插入范围内容
利用范围，可以删除或复制内容，还可以像前面介绍的那样操作范围中的内容。使用insertNode()方法可以向范围选区的开始处插入一个节点。假设在前面例子中的HTML前面插入以下HTML代码
<span>Inserted text</span>
那么可以使用下列代码：
var p1 = document.getElementById("p1"); var helloNode = p1.firstChild.firstChild; var worldNode = p1.lastChild; var range = document.createRange(); var span = document.createElement("span"); range.setStart(helloNode, 2); range.setEnd(worldNode, 3); span.style.color = "red"; span.appendChild(document.createTextNode("Inserted text")); range.insertNode(span);
运行以上javascript代码，就会得到如下HTML代码
<p><b>He<span styie="color:red">Inserted text</span>llo</b> world</p>
[注意]<span>正好被插入到了"Hello"中的"llo"前面，而该位置就是范围选区的开始位置。使用这种技术可以插入一些帮助提示信息，例如在打开新窗口的链接旁边插入一幅图像
【surroundContents()】
除了向范围内部插入内容之外，还可以环绕范围插入内容，此时就要使用surroundContents()方法。这个方法接受一个参数，即环绕范围内容的节点。在环绕范围插入内容时，后台会执行下列步骤
1、提取出范围中的内容(类似执行extractContents() )
2、将给定节点插入到文档中原来范围所在的位置上
3、将文档片段的内容添加到给定节点中
可以使用这种技术来突出显示网页中的某些词句，例如下列代码
var p1 = document.getElementById("p1"); var helloNode = p1.firstChild.firstChild; var worldNode = p1.lastChild; var range = document.createRange(); range.selectNode(helloNode); var span = document.createElement("span"); span.style.backgroundColor = "yellow"; range.surroundContents(span);
以上代码会给范围选区加上一个黄色的背景。得到的HTML代码如下所示
<p><b><span>Hello</b> world!</p>
为了插入<span>，范围必须包含整个DOM选区，而不能仅仅包含选中的DOM节点
折叠范围