在网上查找Range相关资料时,发现都是残缺不全的,最后在W3C官方查找到一篇最为全面的介绍Range的文章。现将文章总结如下,希望对大家有所帮助。

简介

Range用来标识页面的范围,可以用两个边界点来生成一个Range对象,在用户浏览一些页面时,经常使用鼠标选中一些文本,那么这些文本就可以生成Range。但必须注意,google浏览器只允许用户选中一次文本,而其他浏览器,支持ctrl多选文本,而Range要求文本必须是连续的,所以多选文本必须用多个Range表示。

Range的定义

前面我们说过,可以由两个边界点来生成一个Range对象,那么我们怎样来描述一个边界点呢?

A boundary-point's position in a Document or DocumentFragment tree can be characterized by a node and an offset.

我们可以使用一个Node节点以及在节点中的偏移来标识一个边界点。
举个例子,如下图:

上图定义了4个Range,每个Range的起始边界点和终止边界点本别用S#和E#来表示,对于Range2来说,起始边界点包含的属性为:
节点–BODY,偏移–1,终止边界:节点–BODY,偏移–2。

创建Range

DocumenrRange包含createRange()函数,可用于创建Range对象。

1
2
3
interface DocumentRange {
Range createRange();
}

修改Range的范围

通过修改边界点来修改Range的范围。

1
2
3
4
void setStart(in Node parent, in long offset)
raises(RangeException);
void setEnd(in Node parent, in long offset)
raises(RangeException);

对比边界点

我们可以通过对比边界点来比较两个Range。

1
2
short compareBoundaryPoints(in CompareHow how, in Range sourceRange)
raises(RangeException);

删除Range

1
void deleteContents();
1
2
3
4
(1) <FOO>A**B<MOO>CD</MOO>**CD</FOO> --><FOO>A^CD</FOO>
(2) <FOO>A<MOO>B**C</MOO>D**E</FOO> --><FOO>A<MOO>B</MOO>^E</FOO>
(3) <FOO>X**Y<BAR>Z**W</BAR>Q</FOO> --><FOO>X^<BAR>W</BAR>Q</FOO>
(4) <FOO><BAR1>A**B</BAR1><BAR2/><BAR3>C**D</BAR3></FOO>--><FOO><BAR1>A</BAR1>^<BAR3>D</BAR3>

以上是不同情况下,删除Range后,剩下的内容。(其中**内部包含的是否选中的内容)

内容克隆

可以使用如下方法克隆Range中的内容。(注意返回类型)

1
DocumentFragment cloneContents();

插入内容

可以使用如下方法在Range中插入一个节点。节点将被插入Range的起始边界点处。

1
void insertNode(in Node n) raises(RangeException);

包裹内容

可以使用如下方法包裹内容。(包裹:使用指定的节点包围Range)

1
void surroundContents(in Node newParent);

example:

1
2
3
<BAR>A**B<MOO>C</MOO>D**E</BAR>
使用函数 surroundContents(FOO)后:
<BAR>A**<FOO>B<MOO>C</MOO>D</FOO>**E</BAR>

FOO为元素节点。

Range接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// Introduced in DOM Level 2:
interface Range {
readonly attribute Node startContainer;
// raises(DOMException) on retrieval

readonly attribute long startOffset;
// raises(DOMException) on retrieval

readonly attribute Node endContainer;
// raises(DOMException) on retrieval

readonly attribute long endOffset;
// raises(DOMException) on retrieval

readonly attribute boolean collapsed;
// raises(DOMException) on retrieval

readonly attribute Node commonAncestorContainer;
// raises(DOMException) on retrieval

void setStart( in Node refNode, in long offset)
raises(RangeException,
DOMException);
void setEnd( in Node refNode, in long offset)
raises(RangeException,
DOMException);
void setStartBefore( in Node refNode)
raises(RangeException,
DOMException);
void setStartAfter( in Node refNode)
raises(RangeException,
DOMException);
void setEndBefore( in Node refNode)
raises(RangeException,
DOMException);
void setEndAfter( in Node refNode)
raises(RangeException,
DOMException);
void collapse( in boolean toStart)
raises(DOMException);
void selectNode( in Node refNode)
raises(RangeException,
DOMException);
void selectNodeContents( in Node refNode)
raises(RangeException,
DOMException);

// CompareHow
const unsigned short START_TO_START = 0;
const unsigned short START_TO_END = 1;
const unsigned short END_TO_END = 2;
const unsigned short END_TO_START = 3;

short compareBoundaryPoints( in unsigned short how, in Range sourceRange)
raises(DOMException);
void deleteContents()
raises(DOMException);
DocumentFragment extractContents()
raises(DOMException);
DocumentFragment cloneContents()
raises(DOMException);
void insertNode( in Node newNode)
raises(DOMException,
RangeException);
void surroundContents( in Node newParent)
raises(DOMException,
RangeException);
Range cloneRange()
raises(DOMException);
DOMString toString()
raises(DOMException);
void detach()
raises(DOMException);
};

接口中各个属性和函数的意义请参考这里

总结

Range在进行前端Web开发时很少用到,但是在实际开发时,往往会遇到一些问题很难在百度上找到资料,这时不妨到官方网站看看,必有所获!