Range介绍

1,239 views

Published on

range 标准化读取

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,239
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Range介绍

  1. 1. Range 标准化 承玉@taobao
  2. 2. 大纲  获取 Range  W3C Range  IE Range  IE -> W3C
  3. 3. 读取  标准:  window 接口 的 getSelection 方法获得 Selection 对象, Selection 对象的 getRangeAt 方法获得指定的 Range 对 象。  window.getSelection().getRangeAt(index)  IE:  document.selection.createRange()  从当前文本选择区域创建一个textrange  或者在当前的控件选择下创建一个控件选择集合
  4. 4. W3C Range  定义  位置  偏移量  图解  API
  5. 5. 定义  表示文档连续的一段内容范围,通过一对边界点定义。 readonly attribute Node startContainer; readonly attribute long startOffset; readonly attribute Node endContainer; readonly attribute long endOffset;  提供访问文档dom的高层次接口,每个操作和DOM Core 的一系列方法对应,允许浏览器对常用的编辑模 式进行优化。
  6. 6. 位置  一个range包含两个边界点,分别用来标志range的开 始和结束位置。  边界点可以用容器和偏移来表示。  容器:Element, Comment, ProcessingInstruction, EntityReference, CDATASection, Document, DocumentFragment, Attr, or Text node  偏移量:相对容器的偏移(字数或者节点数)
  7. 7. 偏移量  1. 容器为 Attr, Document, DocumentFragment, Element 或者 EntityReference node  偏移量为当前位置以前的节点个数  2. 容器为 characterData, Comment 或者 ProcessingInstruction node  偏移量为当前位置以前的文字个数
  8. 8. 图解
  9. 9. API  setStart() / setEnd()  Collpase()  selectNode() / selectNodeContents()  deleteContents()  …..
  10. 10. IE Range  没有显示定义四个成员表示边界位置!  API
  11. 11. API  moveToElementText (Node a) :将选择区域变更为 a ,起始位置为 a 的前后。  | <span> test </span> |  collapse(start) :根据参数将结束位置重合到开始位 置(true)或开始位置重合到结束位置(false)。  | <span> test </span> |  ^ <span> test </span>
  12. 12. API  parentElement :获取包围选择区域的元素节点。  <span> te ^ st </span>  range1.compareEndPoints('XxToYy',range2) :  xx,yy 可以为 Start 或 End,取 range1 的 xx 位置和 range2 的 yy 位置比较,根据前后顺序返回-1,1,0表示 重合。
  13. 13. API  range1.setEndPoint ( "XxToYy" , range2 ) :  xx,yy 可以为 Start 或 End,将range1的xx位置设为 range2的yy位置。  text :  该选择区域内的文字信息
  14. 14. IE -> W3C
  15. 15. 其他  设置  W3c  r=document.createRange()  r.setStart() / r.setEnd()  s=window.getSelection  s.removeAllRanges()  s.addRange()  IE  Trick ?
  16. 16. 回顾
  17. 17. See you next time

×