range介绍

Range 标准化

承玉@taobao

大纲

获取 Range

W3C Range

IE Range

IE -> W3C

读取

标准：

window 接口 的 getSelection 方法获得 Selection 对象，Selection 对象的 getRangeAt 方法获得指定的 Range 对象。

window.getSelection().getRangeAt(index)

IE： document.selection.createRange()

从当前文本选择区域创建一个textrange

或者在当前的控件选择下创建一个控件选择集合

W3C Range

定义

位置

偏移量

图解

API

定义

表示文档连续的一段内容范围，通过一对边界点定义。

readonly attribute Node startContainer;

readonly attribute long startOffset;

readonly attribute Node endContainer;

readonly attribute long endOffset;

提供访问文档dom的高层次接口，每个操作和DOM Core 的一系列方法对应，允许浏览器对常用的编辑模式进行优化。

位置

一个range包含两个边界点，分别用来标志range的开始和结束位置。

边界点可以用容器和偏移来表示。

容器：Element, Comment, ProcessingInstruction, EntityReference, CDATASection, Document, DocumentFragment, Attr, or Text node

偏移量：相对容器的偏移（字数或者节点数）

偏移量

1. 容器为 Attr, Document, DocumentFragment, Element 或者 EntityReference node

偏移量为当前位置以前的节点个数

2. 容器为 characterData, Comment 或者ProcessingInstruction node

偏移量为当前位置以前的文字个数

图解

API

setStart() / setEnd()

Collpase()

selectNode() / selectNodeContents()

deleteContents()

…..

IE Range

没有显示定义四个成员表示边界位置！

API

API

moveToElementText (Node a) ：将选择区域变更为a ，起始位置为 a 的前后。

| <span> test </span> |

collapse(start) ：根据参数将结束位置重合到开始位置（true）或开始位置重合到结束位置（false）。

| <span> test </span> |

^ <span> test </span>

API

parentElement ：获取包围选择区域的元素节点。

<span> te ^ st </span>

range1.compareEndPoints('XxToYy',range2) ：

xx,yy 可以为 Start 或 End，取 range1 的 xx 位置和range2 的 yy 位置比较，根据前后顺序返回-1,1，0表示重合。

API

range1.setEndPoint ( "XxToYy" , range2 ) ：

xx,yy 可以为 Start 或 End，将range1的xx位置设为range2的yy位置。

text :

该选择区域内的文字信息

IE -> W3C

其他

设置

W3c r=document.createRange()

r.setStart() / r.setEnd()

s=window.getSelection

s.removeAllRanges()

s.addRange()

IE Trick ?

回顾

See you next time