编程语言
首页 > 编程语言> > Javascript高级编程学习笔记(54)—— DOM2和DOM3(6)范围选择

Javascript高级编程学习笔记(54)—— DOM2和DOM3(6)范围选择

作者:互联网

范围

为了让开发人员更加方便地控制页面“DOM2级遍历和范围”模块定义了“范围”接口

通过该接口开发人员可以选择文档中的一个区域,而不必考虑元素的界限

在常规操作不能有效地修改文档时,使用范围往往可以达到目的

 

DOM中的范围

DOM2级在Document类型中定义了 createRange()方法

在兼容该接口的浏览器中,该方法属于document对象

可以使用以下代码,检测浏览器对其的兼容

var supportsRange = document.implementation.hasFeature("Range","2.0");
var alsoSupportsRange = (typeof document.createRange ==="function");

如果浏览器支持范围,那么就可以使用createRange()来创建范围

var range = document.createRange();

与节点类似,创建的范围也会和文档关联,不能用于其它文档

每个范围由一个Range类型的实例表示

下列属性提供了范围在文档中的位置信息

 

用DOM范围实现简单选择

使用范围来选择文档中的一部分,最简单的方式就是通过

selectNode() 和 selectNodeContents()方法

这两个方法都接收一个参数,即一个DOM节点

selectNode 是将传入节点的整个节点作为范围

selectNodeContents则是将传入节点的所有子节点作为范围

例如:

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

对于以上HTML代码

使用以下代码创建范围

var range1 = document.createRange();
var range2 = document.createRange();
var p1 = document.getElementById('p1');

range1 = range1.selectNode(p1);
range2 = range2.selectNodeContents(p1);

对于上述代码

range1包含的文档内容如下:

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

range2包含的文档内容如下:

<b>hello</b>world!

此外,为了更加精细地控制将哪些节点包含在范围中,还可以使用以下方法

使用这里提到的方法会自动设置范围属性,当然也可以通过设置范围属性来改变选区的范围

即startContainer、startOffset、endContainer、endOffset、commonAncestorContainer这些选区属性

 

用DOM范围实现复杂选择

当我们需要更加复杂的选区,比如我们需要选择某个节点的一部分时

要创建这样复杂的节点,则需要使用 setStart()和 setEnd()来分别设置范围的起止位置

这两个方法都接收两个参数:

1.DOM节点

2.开始/结束位置在节点中的偏移量

 

同样下方的HTML代码为例

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

这里我们使用setStart()和 setEnd()来实现之前的range1、range2

即如下方代码所示:

var range1 = document.createRange();
var range2 = document.createRange();
var p1 = document.getElementById('p1');
var Index = -1;//用于表示p1在其父节点中的偏移

for(let i = 0,len = p1.parentNode.childNodes.length;i<len;i++){
    if(p1.parentNode.childNodes[i] === p1){
        Index = i;
        break;
    }
}

range1.setStart(p1.parentNode, Index);
range1.setEnd(p1.parentNode, Index+1);
range2.setStart(p1, 0);
range2.setEnd(p1, p1.childNodes.length);

 

标签:p1,54,Javascript,refNode,var,DOM2,document,节点,范围
来源: https://www.cnblogs.com/lhyxq/p/10352491.html