Your SlideShare is downloading. ×
0
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Range介绍
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Range介绍

1,051

Published on

range 标准化读取

range 标准化读取

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

No Downloads
Views
Total Views
1,051
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×