range 标准化读取

1. Range 标准化
承玉@taobao

2. 大纲
 获取 Range
 W3C Range
 IE Range
 IE -> W3C

3. 读取
 标准：
 window 接口 的 getSelection 方法获得 Selection 对象，
Selection 对象的 getRangeAt 方法获得指定的 Range 对
象。
 window.getSelection().getRangeAt(index)
 IE：
 document.selection.createRange()
 从当前文本选择区域创建一个textrange
 或者在当前的控件选择下创建一个控件选择集合

4. W3C Range
 定义
 位置
 偏移量
 图解
 API

5. 定义
 表示文档连续的一段内容范围，通过一对边界点定义。
readonly attribute Node startContainer;
readonly attribute long startOffset;
readonly attribute Node endContainer;
readonly attribute long endOffset;
 提供访问文档dom的高层次接口，每个操作和DOM
Core 的一系列方法对应，允许浏览器对常用的编辑模
式进行优化。

6. 位置
 一个range包含两个边界点，分别用来标志range的开
始和结束位置。
 边界点可以用容器和偏移来表示。
 容器：Element, Comment, ProcessingInstruction,
EntityReference, CDATASection, Document,
DocumentFragment, Attr, or Text node
 偏移量：相对容器的偏移（字数或者节点数）

7. 偏移量
 1. 容器为 Attr, Document, DocumentFragment,
Element 或者 EntityReference node
 偏移量为当前位置以前的节点个数
 2. 容器为 characterData, Comment 或者
ProcessingInstruction node
 偏移量为当前位置以前的文字个数

8. 图解

9. API
 setStart() / setEnd()
 Collpase()
 selectNode() / selectNodeContents()
 deleteContents()
 …..

10. IE Range
 没有显示定义四个成员表示边界位置！
 API

11. API
 moveToElementText (Node a) ：将选择区域变更为
a ，起始位置为 a 的前后。
 | <span> test </span> |
 collapse(start) ：根据参数将结束位置重合到开始位
置（true）或开始位置重合到结束位置（false）。
 | <span> test </span> |
 ^ <span> test </span>

12. API
 parentElement ：获取包围选择区域的元素节点。
 <span> te ^ st </span>
 range1.compareEndPoints('XxToYy',range2) ：
 xx,yy 可以为 Start 或 End，取 range1 的 xx 位置和
range2 的 yy 位置比较，根据前后顺序返回-1,1，0表示
重合。

13. API
 range1.setEndPoint ( "XxToYy" , range2 ) ：
 xx,yy 可以为 Start 或 End，将range1的xx位置设为
range2的yy位置。
 text :
 该选择区域内的文字信息

14. IE -> W3C

15. 其他
 设置
 W3c
 r=document.createRange()
 r.setStart() / r.setEnd()
 s=window.getSelection
 s.removeAllRanges()
 s.addRange()
 IE
 Trick ?

16. 回顾

17. See you next time