XML-Range解析

最近在搞图文混排，要插入表情、图片、音频、视频之类的，主要用到XML DOM -Rang对象，恶补下知识，记录之。

转载请注明出处
[我的博客]http://www.lostbug.cn

名词解释

Range对象表示文档的连续区域范围。如用户在窗口中鼠标拖动的连续选中范围。

获取方法

• 通过Document对象的createRange()方法创建
• 通过Selection对象的getRangeAt()方法获取

属性

• Range.collapsed
  返回一个判断Rang起始位置是否相同的boolean值
• Range.commonAncestorContainer
  返回包含startContainer和endContainer的最深节点
• Range.endContainer
  返回包含Range终点的节点
• Range.endOffset
  返回endContainer中表示Range终点位置的数字
• Range.startContainer
  返回包含Range开始的节点
• Range.startOffstet
  返回startContainer表示Range起始位置的数字

方法

方法	描述
cloneContents()	返回新的 DocumentFragment 对象，它包含该范围表示的文档区域的副本。
cloneRange()	创建一个新的 Range 对象，表示与当前的 Range 对象相同的文档区域。
collapse()	折叠该范围，使它的边界点重合。
compareBoundaryPoints()	比较指定范围的边界点和当前范围的边界点，根据它们的顺序返回 -1、0 和 1。比较哪个边界点由它的第一个参数指定，它的值必须是前面定义的常量之一。
deleteContents()	删除当前Rang()对象表示的文档区域
detach()	通知实现不再使用当前的范围，可以停止跟踪。如果调用了范围的这个方法，那么接下来调用的该范围任何方法都会抛出代码为 INVALID_STATE_ERR 的 DOMException 异常。
extract()	删除当前范围表示的文档区域，并且以 DocumentFragment 对象的形式返回那个区域的内容。该方法和 cloneContents() 方法与 deleteContents() 方法的组合很相似。
insertNode()	把指定节点插入Range表示文档范围的起始点
selectNode()	设置Range表示文档范围的边界点，使它包含指定的节点和它的所有子孙节点。
selectNodeContents()	设置该范围的边界点，使它包含指定节点的子孙节点，但不包含指定的节点本身。
setEnd()	把该范围的结束点设置为指定的节点和偏移量。
setEndAfter()	把该范围的结束点设置为紧邻指定节点的节点之后。
setEndBefore()	把该范围的结束点设置为紧邻指定节点之前。
setStart()	把该范围的开始点设置为指定的节点中的指定偏移量。
setStartAfter()	把该范围的开始点设置为紧邻指定节点的节点之后。
setStartBefore()	把该范围的开始点设置为紧邻指定节点之前。
surroundContents()	把指定的节点插入文档范围的开始点，然后重定范围中的所有节点的父节点，使它们成为新插入的节点的子孙节点。
toString()	返回该范围表示的文档区域的纯文本内容。