Range 对象

Range 对象表示一个包含节点与文本节点的一部分的文档片段。
浏览器支持：本小结中列举的属性和方法，IE9+ 及主流浏览器都支持。

获取 Range 对象
1.Document.createRange 方法创建 Range。

var range = document.createRange();

2.通过 Document 对象的构造函数 Range() 来创建 Range。

var range = new Range();

3.用 Selection 对象的 getRangeAt 方法获取 Range。

var sel = window.getSelection();
var range = sel.getRangeAt(0);

对象只读属性

<div id="div" contentEditable="true">
123<span>456</span><span>789</span>000
</div>
<script>
var div = document.getElementById("div");
var sel = window.getSelection();
//鼠标选中 ‘67’时松开
document.onmouseup = function(){
var range = sel.getRangeAt(0);
console.log(range.startContainer.nodeName);
//#text
(文本节点)
console.log(range.startContainer);
//"456"
(起点边界所在的文本节点)
console.log(range.startOffset);
//2
(起点边界在节点中的位置下标)
console.log(range.endContainer);
//"789"
(终点边界所在的文本节点)
console.log(range.endOffset);
//1
(终点边界在节点中的位置下标)
console.log(range.collapsed);
//false
(起点和终点是否在同一位置)
var el = range.commonAncestorContainer;
// (起点所在节点和终点所在节点的父节点)
console.log(div === el);
//true 
}
</script>

对象方法

setStart()
设置 Range 的起点。
语法：range.setStart(startNode, startOffset)
参数：
startNode 起点所在节点。
startOffset 必须为不小于0的整数。在 startNode 中的偏移量 算起的偏移量。

如果 startNode 是文本节点, 那么 startOffset 指的是偏移的字符个数。 如果是元素节点， startOffset 是指偏移的子节点个数。
如果设置的起始位点在结束点之下（在文档中的位置），将会导致选区折叠，起始点和结束点都会被设置为指定的起始位置。

setEnd()
设置 Range 的终点。
语法：range.setEnd(endNode, endOffset)
参数：
endNode 终点所在节点。
endOffset 必须为不小于0的整数。在 endNode 中的偏移量 。

如果 endNode 是文本节点, 那么 endOffset 指的是偏移的字符个数。 如果是元素节点， endOffset 是指偏移的子节点个数。
如果设置的起始位点在结束点之下（在文档中的位置），将会导致选区折叠，起始点和结束点都会被设置为指定的起始位置。

deleteContents()
从文档中移除 Range 包含的内容。
语法：range.deleteContents()

以上3个方法示例：

<div>
123<span id="a">456</span><span id="b">789</span>0
</div>
<script>
var div = document.getElementById("div");
var a = document.getElementById("a");
var b = document.getElementById("b");
var range = document.createRange();
// 接下来的操作如下...
</script>

操作1：

range.setStart(a, 0);
//起点位于 a 节点内，没有偏移
range.setEnd(b, 0);
//终点位于 b 节点内，没有偏移
range.deleteContents(); //删除包含的内容
/*
最终页面渲染结果：(456被删除了)
<div>
123<span id="a"></span><span id="b">789</span>0
</div>
*/

操作2：

range.setStart(a, 0);
//起点位于 a 节点内，没有偏移
//终点位于 b 节点内，在b节点中偏移1个子节点（b只有一个子节点是文本节点"789"）
range.setEnd(b, 1);
range.deleteContents(); //删除包含的内容
/*
最终页面渲染结果：(456789被删除了)
<div>
123<span id="a"></span><span id="b"></span>0
</div>
*/

setStartBefore()
设置 Range 的起点在目标节点之前。
语法：range.setStartBefore(node)
参数：node 目标节点。

<div>
123<span id="a">456<i>aaa</i></span><span id="b">789<i>bbb</i></span>0
</div>
<script>
var a = document.getElementById("a");
var as = a.childNodes;
//a 的子节点
var b = document.getElementById("b");
var bs = b.childNodes;
//b 的子节点
var range = document.createRange();
range.setStart(a, 0);
//起点在 a 节点， 4的前面
range.setEnd(b, 1);
//终点在 b 节点， 9的后面
//起点设置在 a 的第二个子节点 i 前面，即6的后面
range.setStartBefore(as[1]);
range.deleteContents();
//删除区域内容
</script>

<!-- 最终渲染结果： -->
<div>
123<span id="a">456</span><span id="b"><i>bbb</i></span>0
</div>

setStartAfter()
设置 Range 的起点在目标节点之后。
语法：range.setStartAfter(node)
参数：node 目标节点。

<div>
123<span id="a">456<i>aaa</i></span><span id="b">789<i>bbb</i></span>0
</div>
<script>
var a = document.getElementById("a");
var as = a.childNodes;
//a 的子节点
var b = document.getElementById("b");
var bs = b.childNodes;
//b 的子节点
var range = document.createRange();
range.setStart(a, 0);
//起点在 a 节点， 4的前面
range.setEnd(b, 1);
//终点在 b 节点， 9的后面
//起点设置在 a 的第二个子节点 i 前面，即 7的前面
range.setStartAfter(as[1]);
range.deleteContents();
//删除区域内容
</script>

<!-- 最终结果： -->
<div>
123<span id="a">456<i>aaa</i></span><span id="b"><i>bbb</i></span>0
</div>

setEndBefore()
设置 Range 的终点在目标节点之前。
语法：range.setEndBefore(node)
参数：node 目标节点。

var s = document.getElementsByTagName("span").item(0);
var range = document.createRange();
range.setEndBefore(s);

setEndAfter()
设置 Range 的终点在目标节点之后。
语法：range.setEndAfter(node)
参数：node 目标节点。

var s = document.getElementsByTagName("span").item(0);
var range = document.createRange();
range.setEndAfter(s);

selectNode()
使 Range 包含某个节点及其内容。
语法：range.selectNode(node)
参数：node 目标节点。

调用 Range.selectNode() 方法后， Range 设置为包含整个 Node 。此 Range 的 startContainer 属性和 endContainer 属性保存的 Node 将设置为 referenceNode 的父节点。

<div>
123<span id="a">456<i>aaa</i></span><span id="b">789<i>bbb</i></span>0
</div>
<script>
var a = document.getElementById("a");
var range = document.createRange();
range.selectNode(a);
range.deleteContents();
//删除区域内容
</script>

<!-- 最终结果： -->
<div>
123<span id="b">789<i>bbb</i></span>0
</div>

selectNodeContents()
使 Range 包含某个节点的内容。
语法：range.selectNodeContents(node)
参数：node 目标节点。

<div>
123<span id="a">456<i>aaa</i></span><span id="b">789<i>bbb</i></span>0
</div>
<script>
var a = document.getElementById("a");
var range = document.createRange();
range.selectNodeContents(a);
range.deleteContents();
//删除区域内容
</script>

<!-- 最终结果： -->
<div>
123<span id="a"></span><span id="b">789<i>bbb</i></span>0
</div>

collapse()
向边界点折叠该 Range 。折叠后的 Range 为空，不包含任何内容。
语法：range.collapse(toStart)
参数：toStart 一个布尔值： true 折叠到 Range 的 start 节点，false 折叠到 end 节点。如果省略，则默认为 false .

range.collapse() 相当于将起点位置设置到终点位置，起点和终点在同一位置。
range.collapse(true) 相当于将终点位置设置到起点位置，起点和终点在同一位置。

var range = document.createRange();
var span = document.getElementsByTagName("span").item(0);
range.selectNode(span);
range.collapse(true);

cloneContents()
复制返回一个包含 Range 中所有节点的文档片段。

<div id="div">
123<span id="a">456<i>aaa</i></span><span id="b">789<i>bbb</i></span>0
</div>
<script>
var range = document.createRange();
range.setStart(a, 0);
//起点在 a 节点， 4的前面
range.setEnd(b, 1);
//终点在 b 节点， 9的后面
var t = range.cloneContents();
console.log(t.childNodes.length); //2
console.log(t.childNodes[0]);
//<span id="a">456<i>aaa</i></span>
console.log(t.childNodes[1]);
//<span id="b">789</span>
</script>

extractContents()
返回一个包含 Range 中所有节点的文档片段。

<div id="div">
123<span id="a">456</span>789
</div>
<script>
var div = document.getElementById("div");
var a = document.getElementById("a");
var range = document.createRange();
range.setStart(div, 0);
//起点在 1 的前面
range.setEnd(div, 1);
//终点在 3 的后面
var node = range.extractContents();
a.appendChild(node);
</script>

<!-- 最终渲染结果： -->
<div id="div">
<span id="a">456123</span>789
</div>

insertNode()
在 Range 的起点处插入一个节点。
语法：range.insertNode(node)
参数：node 要插入的节点。

<div>
<span id="a">456</span><span id="b">789</span>
</div>
<script>
var a = document.getElementById("a");
var b = document.getElementById("b");
var range = document.createRange();
range.setStart(a, 0);
//起点在 a 节点， 4的前面
range.insertNode(b);
//将 b 节点插入到起点处
</script>

<!-- 最终渲染结果： -->
<div>
<span id="a"><span id="b">789</span>456</span>
</div>

surroundContents()
将 Range 的内容移动到目标节点中。
语法：range.surroundContents(node)
参数：node 目标节点。

这个方法与 newNode.appendChild(range.extractContents()); range.insertNode(node) 很相近. 选定后, range 拥有了节点标签.
也有例外情况, 如果选定的Range区域包含仅有一个节点标签的Text. 那标签将不会自动成对生成，操作将失败.

<div>
<span id="a">456</span><span id="b">789</span>
</div>
<script>
var a = document.getElementById("a");
var b = document.getElementById("b");
var range = document.createRange();
range.selectNode(a);
//range 包含a节点
range.surroundContents(b);
</script>

<!-- 最终结果： -->
<div>
<span id="b"><span id="a">456</span></span>
</div>

cloneRange()
返回拥有和原 Range 相同的端点的克隆 Range 对象。克隆的对象是复制过来的，而非引用，所以这两个对象双方各自做出的改变，都不会影响另一方。

var range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
var clone = range.cloneRange();

最后

以上就是凶狠时光为你收集整理的Range 对象的全部内容，希望文章能够帮你解决Range 对象所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。