Javascript高级编程学习笔记（55）—— DOM2和DOM3（7）操作范围

操作范围中的内容

在创建范围时，内部会为这个范围创建一个文档片段

范围所属的全部节点都会被添加到这个片段中

虽然选取范围可以不是完整的、良好的DOM结构

但是在这个为范围创建的文档片段中，会自己完缺少的闭合标签，以此构建有效的DOM结构来方便我们操作

上述步骤都是内部实现的，因此我们可以不用过多地关注这一方面

 

首先是 deleteContents（）

这个方法会从文档中删除选中范围的内容

以下方的HTML代码为例

<p id = "p1"><b>hello</b>world!</p>

使用deleteContents（）方法：

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.deleContents();

此后文档中的内容如下

<p id = "p1"><b>he</b>rld!</p>

由于在底层实现中JS会自动完整没有闭合的标签，所以能保有一个良好的文档结构

 

然后就是 extractContents（）方法

这个方法和 delete Contents（）方法一样都会从文档中移除范围内容

但是有所区别

这个方法会返回被移除的范围中的内容

 

此外 cloneContents（） 方法用于复制范围中的节点

和 extractContents（） 一样都会返回节点，只不过这里返回的不是实际节点

而是实际节点的副本

我们可以使用 appendChild（）方法将其重新插入文档中

PS.在调用上述的操作范围的方法之前，范围中的内容并不会产生格式良好的文档片段

 

向范围中插入内容

首先是 insertNode（）方法，可以向范围的开始处插入一个节点

例如：

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 span = document.createElement("span");
span.style.color = "red";
span.appendChild(document.createTextNode("Inserted text"));
range.insertNode(span);

运行后会得到以下文档结构

<p id = "p1"><b>he<spand style="color:red">Interted text</span>llo</b>world!</p>

 

此外还有一个方法 surroundContents（）用于环绕范围插入内容

一般来说用于为范围添加特殊样式

 

折叠DOM范围

折叠是指范围没有选中内容的情况，就相当于用鼠标选择文字时的光标竖线一样

该情况储存在range 的 collapsed 属性中

range.collapsed

可以用于判断两个节点十分紧密相邻

 

 

比较范围

在有多个范围的情况下，可以使用 compareBoundaryPoints（）方法来确定范围是否有公共边界

该方法接收两个参数：

1. 表示比较方式的常量：
   1. Range.START_TO_START(0) 比较两个范围的起点
   2. Range.START_TO_END(1) 比较第一个起点和第二个终点
   3. Range.END_TO_END(2); 比较两个范围的终点
   4. Range.END_TO_START(3) 比较第一个终点和第二个起点
2. 要比较的范围

该方法对于第一个点在第二个比较的点之前返回-1

两个点相同返回 0

第一个在第二个之后返回1

 

其它

复制DOM范围

var newRange = range.cloneRange();

清理DOM范围

range.detach();//从文档中分离
range = null；//解除引用