JS Range详解|极客笔记

JS Range详解

在JavaScript中，Range是一个重要的概念，用于表示一段范围（一段区间）。在实际开发中，我们经常会涉及到对某个范围内的元素进行操作，这时Range就非常有用。本文将详细介绍Range的概念、创建方法、属性和方法以及实际应用场景。

什么是Range

Range是一个表示文档中某个范围的对象。它可以用来表示一个文档中的连续片段，比如一段文本、一个元素或者其他节点。在DOM中，Range对象通常用于对文档进行选择、插入和删除操作。

创建Range对象

在JavaScript中，我们可以使用document对象的createRange()方法来创建一个Range对象。具体的语法如下：

var range = document.createRange();

创建Range对象后，可以通过以下方式来设置它的起始点和结束点：

setStart()：设置Range的起始节点和偏移量
setEnd()：设置Range的结束节点和偏移量

例如，我们可以创建一个包含文档中第一个段落的Range对象：

var range = document.createRange();
var p = document.getElementsByTagName('p')[0];
range.setStart(p, 0);
range.setEnd(p, p.childNodes.length);

Range属性和方法

Range对象提供了一系列属性和方法，用于操作范围内的内容。以下是一些常用的属性和方法：

startContainer：返回Range的起始节点
startOffset：返回Range的起始偏移量
endContainer：返回Range的结束节点
endOffset：返回Range的结束偏移量
collapsed：返回Range是否是一个空范围（即起点和终点相同）
commonAncestorContainer：返回Range的最小公共祖先节点

除了上述属性之外，Range对象还提供了一些操作范围内内容的方法，如：

selectNode(node)：选择指定节点的内容
deleteContents()：删除Range范围内的内容
extractContents()：提取Range范围内的内容（并返回一个DocumentFragment对象）
cloneContents()：克隆Range范围内的内容（返回一个DocumentFragment对象）
insertNode(node)：在Range范围内插入节点

实际应用场景

Range对象在实际开发中有许多应用场景，下面我们列举一些常见的用法：

高亮显示文本

可以使用Range对象来选中一段文本并对其进行高亮显示：

var range = document.createRange();
var p = document.getElementsByTagName('p')[0];
range.setStart(p.childNodes[0], 5);
range.setEnd(p.childNodes[0], 10);

var span = document.createElement('span');
span.style.backgroundColor = 'yellow';

range.surroundContents(span);

拖拽选择文本

在实现拖拽选择文本功能时，可以使用Range对象来表示选中范围：

var range = document.createRange();
var p = document.getElementsByTagName('p')[0];
range.setStart(p.childNodes[0], 5);
range.setEnd(p.childNodes[0], 10);

var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

插入新节点

可以使用Range对象来在文档中指定位置插入新节点：

var range = document.createRange();
var p = document.getElementsByTagName('p')[0];
range.setStart(p, 0);
range.setEnd(p, 0);

var newNode = document.createElement('div');
newNode.textContent = '新节点';

range.insertNode(newNode);