最近在搞图文混排,要插入表情、图片、音频、视频之类的,主要用到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() | 返回该范围表示的文档区域的纯文本内容。 |