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()方法来确定范围是否有公共边界
该方法接收两个参数:
- 表示比较方式的常量:
- Range.START_TO_START(0) 比较两个范围的起点
- Range.START_TO_END(1) 比较第一个起点和第二个终点
- Range.END_TO_END(2); 比较两个范围的终点
- Range.END_TO_START(3) 比较第一个终点和第二个起点
- 要比较的范围
该方法对于第一个点在第二个比较的点之前返回-1
两个点相同返回 0
第一个在第二个之后返回1
其它
复制DOM范围
var newRange = range.cloneRange();
清理DOM范围
range.detach();//从文档中分离 range = null;//解除引用
标签:p1,55,Javascript,range,文档,var,DOM2,document,范围 来源: https://www.cnblogs.com/lhyxq/p/10353848.html