DOM Range使用总结

笔者在项目开展时，并不知道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对象。

interface DocumentRange {
    Range createRange();
}

修改Range的范围

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

  void setStart(in Node parent, in long offset)
                    raises(RangeException);
  void setEnd(in Node parent, in long offset)
                    raises(RangeException);

对比边界点

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

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

删除Range

void deleteContents();

(1) <FOO>AB<MOO>CD</MOO>CD</FOO> -->
<FOO>A^CD</FOO>
(2) <FOO>A<MOO>BC</MOO>DE</FOO> -->
<FOO>A<MOO>B</MOO>^E</FOO>
(3) <FOO>XY<BAR>ZW</BAR>Q</FOO> -->
<FOO>X^<BAR>W</BAR>Q</FOO>
(4) <FOO><BAR1>AB</BAR1><BAR2/><BAR3>CD</BAR3></FOO>-->
<FOO><BAR1>A</BAR1>^<BAR3>D</BAR3>
以上是不同情况下，删除Range后，剩下的内容。

内容克隆

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

 DocumentFragment cloneContents();

插入内容

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

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

包裹内容

可以使用如下方法包裹内容。（包裹：使用指定的节点包围Range）

void surroundContents(in Node newParent);

example:
<BAR>AB<MOO>C</MOO>DE</BAR>
After surroundContents(FOO):
<BAR>A<FOO>B<MOO>C</MOO>D</FOO>E</BAR>
FOO为元素节点。

Range接口

// 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开发时很少用到，但是在实际开发时，往往会遇到一些问题很难在百度上找到资料，这时不妨到官方网站看看，必有所获！