在 HTML5 中，一个 Range 对象代表页面上的一段连续区域。通过 Range 对象，可以获取或修改页面上的任何区域。包含获取，修改，删除和替换等操作。
核心内容：
1.cloneRange
2.cloneContents
3.extractContents
4.createContextual
5.createContextual-Fragment
6.insertNode
7.compareBoundaryPoints
8.collapse
9.detach
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var rangeObj=document.createRange();
function selectObj(){
var div=document.getElementById("mydiv");
rangeObj.selectNode(div);
}
function unselect(){
rangeObj.collapse(false);
}
function showRange(){
alert(rangeObj.toString());
}
</script>
</head>
<body>
<div id="mydiv" style="color: aqua;background-color: black; width: 100px; height: 100px;">内容区域</div>
<button onclick="selectObj()">选择内容</button>
<button onclick="unselect()">取消内容</button>
<button onclick="showRange()">显示内容</button>
</body>
</html>
代码可以复制直接运行的。
而range的detach方法如：rangeObj.detach()释放Range对象，释放后其他事件就不成立了，主要用于释放Range对象来提升应用的性能。