Range对象中文API
The Range接口代表给定的文档的一个片段，这个片段包含节点集合和部分文本节点集合。Range可以通过document对象的createRange方法创建，可以通过Selection的getRangeAtgetRangeAt方法获取到。也可以通过 Range() 构造函数来生成。
Range属性
-
Range.collapsed：只读 -
返回
Boolean值只是Range开始和结束点是否重合。 -
Range.commonAncestorContainer：只读 - 返回包含了起始容器（startContainer）和结束容器（enContainer）最深的节点。
-
Range.endContainer：只读 - 返回Range对象的结束容器
-
Range.endOffset：只读 - 返回一个数字表示结束容器在Range的结束点。
-
Range.startContainer：只读 - 返回Range对象起始容器
-
Range.startOffset：只读 - 返回一个数字表示起始容器在Range的起始点。
Range构造函数
-
Range() - 返回文档开始和结束的range对象
Range方法
Range.comparePoint()- 返回-1,0,1指示对比的点在range前，里面或者之后
Range.createContextualFragment()- 从给定代码串创建文档片段
Range.getBoundingClientRect()- 返回一个
ClientRect对象包含了range的所有内容。是range.getClientRects()返回的所有rectanglesRange.getClientRects()- 返回
ClientRect列表对象聚合Element.getClientRects()结果，对所有的在range里面的元素Range.intersectsNode()- 和指定节点对比，返回boolean值只是节点和range是否相交
Range.isPointInRange()- 返回boolean值指示某个点是否在range里面
-
Range.setStart() - 设置range对象开始位置
-
Range.setEnd() - 设置range对象结束位置
-
Range.setStartBefore() - 设置一个range对象的起始位置在参考节点之前
-
Range.setStartAfter() - 设置一个range对象的起始位置在参考节点之后
-
Range.setEndBefore() - 设置一个range对象的结束位置在参考节点之前
-
Range.setEndAfter() - 设置一个range对象的结束位置在参考节点之后
-
Range.selectNode() - 将指定节点和内容包含在range中
-
Range.selectNodeContents() - 将节点的内容包含在range
-
Range.collapse() - 将range折叠到边界点
-
Range.cloneContents() - 返回range中的文档片段（DoducmentRange）副本
-
Range.deleteContents() - 从文档中删除range包含的内容
-
Range.extractContents() - 将range的内容移动到一个文档片段中
-
Range.insertNode() - 在range起始位置插入一个节点
-
Range.surroundContents() - 将range内容用一个新节点括起
-
Range.compareBoundaryPoints() - 比较2个range的边界点
-
Range.cloneRange() - 返回此range对象的副本
-
Range.detach() - 释放range对象，提供性能
-
Range.toString() - 返回range包含的文本内容
-
Range.compareNode()：这个API不标准，可能被废弃，能不用最好不用。 - 和指定节点对比，返回这个节点在range对象前，后，里面后缀包含range对象
- 一下这些API为实验性的，最好不要实际应用
规格
| Specification | Status | Comment |
|---|---|---|
| DOM | Living Standard |
Do not use RangeException anymore, use DOMException instead.Made the second parameter of collapse() optional.Added the methods isPointInRange(), comparePoint(), and intersectsNode().Added the constructor Range(). |
| DOM Parsing and Serialization | Living Standard |
Added the method createContextualFragment(). |
| CSS Object Model (CSSOM) View Module | Working Draft |
Added the methods getClientRects() and getBoundingClientRect(). |
| Document Object Model (DOM) Level 2 Traversal and Range Specification | Recommendation | Initial specification. |
浏览器兼容
PC机
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) | 1.0 (1.7 or earlier) [1] | 9.0 | 9.0 | (Yes) |
Range() constructor |
(Yes) | 24.0 (24.0) | Not supported | 15.0 | (Yes) |
compareNode() |
Not supported |
1.0 (1.7 or earlier) Removed in 3.0 (1.9) |
Not supported | Not supported | Not supported |
isPointInRange(), and comparePoint() |
(Yes) | (Yes) | Not supported | 15.0 | ? |
intersectsNode() |
(Yes) | 17.0 (17.0) [2] | Not supported | 15.0 | ? |
getClientRects() and getBoundingClientRect() |
(Yes) | 4.0 (2.0) | Not supported | 15.0 | ? |
createContextualFragment() |
(Yes) | (Yes) | Not supported | 15.0 | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | 1.0 (1.0) [1] | 9.0 | 9.0 | (Yes) |
[1] 从Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10)开始 Range对象会抛出DOM4中定义的 DOMException 异常，替代早期版本定义的 RangeException 。
[2] Gecko 1.9-之前都支持range对象，之后的版本不支持。直到 Gecko 17才重新按照标准重新实现。
翻译自：https://developer.mozilla.org/en-US/docs/Web/API/range，部分翻译不准，e文好的最好看原文。
加支付宝好友偷能量挖...
原创文章，转载请注明出处：Range对象中文API