View
1.213
Download
2
Embed Size (px)
DESCRIPTION
range 标准化读取
Citation preview
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