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

时间:2022-01-01 23:14:26

操作范围中的内容

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

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

虽然选取范围可以不是完整的、良好的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;//解除引用