XML DOM - Range Object

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

如果一个实现支持Range模块，那么Document对象就定义了了createRange(),调用它可以创建新的Range对象。

*IE定义了不兼容的Document.createRange()方法，它返回的对象与Range相似，但不兼容。

Range接口为指定文档“选中”的区域定义了大量的方法，此外还有几个方法可以用于在选中的区域进行剪切和黏贴类型的操作。

Range接口的属性提供了获取范围的边界节点和偏移量的方法。它的方法提供了设置范围边界的方法。注意，范围的边界可以设置为Document或DocumentFragment对象中的节点。一旦定义了范围的边界点，就可以使用deleContents()、extractContents()、cloneContents()和insertNode()方法实现剪切、复制和黏贴等操作。

Range对象的常量

这些常量指定了如何比较Range对象的边界点

Range对象的属性

*所有属性都是只读，不能通过设置这些属性改变范围开始点和结束点，必须调用setEnd()方法和setStart()方法实现这一点。

*调用detach()方法后，这些属性的任何操作都会跑出代码为INVALID_START_ERR的DOMException异常

Range对象演示示例

<script>
  function rangeTest(){
      var html;
      showRangeDiv = document.getElementById("showRange");
      selection = document.getSelection();
      if(selection.rangeCount > 0){
          html = "您选取了>"+selection.rangeCount + "<内容<br/>";
          for(var i = 0; i<selection.rangeCount; i++){
             var range = selection.getRangeAt(i);
             html += "第" + （i+1）+"段内容："+range+"<br/>"
         }
        showRangeDiv.innerHTML = html;
   }
}
</script>
Selection 对象与Range对象的使用
<input type="button" value="button" οnclick="rangeTest()">
<div id="showRange"></div>

*Selection.rangeCount

The Selection.rangeCount read-only property returns the number of ranges in the selection.

Before the user has clicked a freshly loaded page, the rangeCount is 0.After the user clicks on the page, rangeCount is 1,even if no selection is visible. 

*SelectNode

*SelectNodeContents

*deleteContents