共计 3345 个字符，预计需要花费 9 分钟才能阅读完成。
Range 对象的概念
Range 对象代表页面上一段间断的区域，通过 Range 对象能够获取或者批改页面上任何区域的内容。也能够通过 Range 的办法进行复制和挪动页面任何区域的元素，甚至能够通过 Range 对象获取并管制光标地位
获取页面 Range 对象
var selection = window.getSelection();
var range = selection.getRangeAt(0);//getRangeAt 办法获取 range，参数为 range 下标
每一个 selection 对象都有一个或者多个 Range 对象，每一个 range 对象代表用户鼠标所选取范畴内的一段间断区域，在 firefox 中，能够通过 ctrl 键能够选取多个间断的区域，因而在 firefox 中一个 selection 对象有多个 range 对象，在其余浏览器中，用户只能选取一段间断的区域，因而只有一个 range 对象。
创立 Range 对象
var range = document.createRange();
Range 对象的属性和办法
(1)属性
startContainer
蕴含“终点”的节点。“蕴含”的意思是终点所属的节点。
endContainer
蕴含“完结点”的节点
startOffset
“终点”在 startContainer 中的偏移量。
如果 startContainer 是文本节点、正文节点或 CDATA 节点，则返回“终点”在 startContainer 中字符偏移量。
如果 startContainer 是元素节点，则返回“终点”在 startContainer.childNodes 中的秩序。
collapsed
终点和完结点在一起时为 true；Range 对象为空（刚 createRange()时）也为 true。
commonAncestorContainer
第一个蕴含 Range 的节点，即同时蕴含 Range 的终点和完结点。
(2)定位（设置“终点”和“完结点”）的一些办法
setStart(node, offset)和 setEnd(node, offset)
setStart：设置终点的地位，node 是对 startContainer 的援用，偏移则是 startOffset；
setEnd：设置完结点的地位，node 是对 endContainer 的援用，偏移则是 startOffset；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>range3</title>
<script>
function deleteChar() {var div = document.getElementById("myDiv");
var textNode = div.firstChild;
var rangeObj = document.createRange();
rangeObj.setStart(textNode,1);
rangeObj.setEnd(textNode,4);
rangeObj.deleteContents();}
</script>
</head>
<body>
<div id="myDiv" style="color:red"> 这段文字是用来删除的 </div>
<button onclick="deleteChar()"> 删除文字 </button>
</body>
</html>setStartBefore(referenceNode)、setStartAfter(referenceNode)
setEndBefore(referenceNode)、setEndAfter(referenceNode)
setStartBefore：将“终点”设置到 referenceNode 前
setStartAfter：将“终点”设置到 referenceNode 后
setEndBefore：将“完结点”设置到 referenceNode 前
setEndAfter：将“完结点”设置到 referenceNode 后
留神：应用这四个办法设置的“终点”或“完结点”的父节点与 referenceNode 的父节点是同一个元素。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="application/javascript">
function delrow(){var table=document.getElementById("mytable");
if(table.rows.length>0){var row=table.rows[0];
var rangeObj=document.createRange();
rangeObj.setStartBefore(row);
rangeObj.setEndAfter(row);
rangeObj.deleteContents();}
}
</script>
</head>
<body>
<table id="mytable" border="1">
<tr>
<td> 内容 1 </td>
<td> 内容 2 </td>
</tr>
<tr>
<td> 内容 3 </td>
<td> 内容 4 </td>
</tr>
</table>
<button onclick="delrow()"> 删除第一行 </button>
</body>
</html>selectNode(referenceNode)和 selectNodeContents(referenceNode)
selectNode：设置 Range 的范畴，包含 referenceNode 和它的所有后辈 (子孙) 节点。
selectNodeContents：设置 Range 的范畴，包含它的所有后辈节点。
(3)批改范畴的办法
cloneRange()
cloneRange()办法将返回一个以后 Range 的正本，它也是 Range 对象。
cloneContents()
能够克隆选中 Range 的 fragment 并返回改 fragment。这个办法相似 extractContents()，但不是删除，而是克隆
deleteContents()
从 Dom 中删除 Range 选中的 fragment。留神该函数没有返回值（实际上为 undefined）。
extractContents()
将选中的 Range 从 DOM 树中移到一个 fragment 中，并返回此 fragment
insertNode
insertNode 办法能够插入一个节点到 Range 中，留神会插入到 Range 的“终点”
collapse()
Range.collapse() 办法向边界点折叠该 Range。
range.collapse(toStart);//toStart 可选, 一个布尔值：true 折叠到 Range 的 start 节点，false 折叠到 end 节点。如果省略，则默认为 false .(4)比拟
compareBoundaryPoints()
var compare = comparerange.compareBoundaryPoints(how, sourceRange);compare：返回 1, 0, -1.（0 为相等，1 为时，comparerange 在 sourceRange 之后，- 1 为 comparerange 在 sourceRange 之前）。
how：比拟哪些边界点，为常数。
Range.START_TO_START – 比拟两个 Range 节点的开始点
Range.END_TO_END – 比拟两个 Range 节点的完结点
Range.START_TO_END – 用 sourceRange 的开始点与以后范畴的完结点比拟
Range.END_TO_START – 用 sourceRange 的完结点与以后范畴的开始点比拟
sourceRange：个 Range 对象的边界。
(5)其它
detach()
尽管 GC（垃圾收集器）会将其收集，但用 detach()开释 range 对象是一个好习惯。语法为：oRange.detach();
toString()
返回该范畴示意的文档区域的纯文本内容，不蕴含任何标签;
留神点
除了火狐浏览器外。如果 section 中曾经存在一个 range 了，再通过 addRange 增加 range 是有效