html5之Range对象详解

13 min read

Range对象是HTML5标准中的一个重要对象，用于处理文档中的一段范围，它可以表示任意文档中的范围，比如文本范围、HTML元素范围、XML节点范围等，特别是在富文本编辑器、文本选择、查找和替换等场景中有广泛的应用。本文将对Range对象的相关属性和方法进行详细介绍。

Range对象的创建

Range对象的创建有很多方法，以下是常用的几种方法：

1.以指定元素的指定起点和终点创建一个Range对象：

var range = document.createRange(); //创建一个空的Range对象
range.setStart(element, startOffset); //设置起点
range.setEnd(element, endOffset); //设置终点

2.以指定文本节点的指定位置创建一个Range对象：

var range = document.createRange(); //创建一个空的Range对象
range.setStart(textNode, startOffset); //设置起点
range.setEnd(textNode, endOffset); //设置终点

3.以指定范围创建一个Range对象：

var range = document.createRange(); //创建一个空的Range对象
range.setStart(range1.startContainer, range1.startOffset); //设置起点
range.setEnd(range1.endContainer, range1.endOffset); //设置终点

4.使用选择对象创建Range对象：

var range = window.getSelection().getRangeAt(0); //获取选择对象中的第一个Range对象

Range对象的属性和方法

Range对象有很多属性和方法，以下是常用的几种方法：

1.设置和获取起点和终点：

range.setStart(element, offset); //设置起点
range.setEnd(element, offset); //设置终点
range.setStartBefore(element); //将起点设置在指定元素之前
range.setStartAfter(element); //将起点设置在指定元素之后
range.setEndBefore(element); //将终点设置在指定元素之前
range.setEndAfter(element); //将终点设置在指定元素之后
range.getStartElement(); //获取起点所在的元素
range.getStartOffset(); //获取起点相对于起点所在元素的偏移量
range.getEndElement(); //获取终点所在的元素
range.getEndOffset(); //获取终点相对于终点所在元素的偏移量

2.获取范围所包含的节点和文本：

range.commonAncestorContainer; //获取范围所包含的最近的公共祖先节点
range.startContainer; //获取范围的起点所在的节点
range.startOffset; //获取起点相对于起点所在节点的偏移量
range.endContainer; //获取范围的终点所在的节点
range.endOffset; //获取终点相对于终点所在节点的偏移量
range.cloneContents(); //克隆范围内的节点
range.extractContents(); //提取范围内的节点，范围变成空范围
range.deleteContents(); //删除范围内的节点，范围变成空范围

3.设置和获取范围内的属性和样式：

range.surroundContents(element); //将范围内的节点用指定的元素包裹起来
range.cloneContents(); //克隆范围内的节点
range.extractContents(); //提取范围内的节点，范围变成空范围
range.deleteContents(); //删除范围内的节点，范围变成空范围
range.insertNode(node); //将指定的节点插入到范围中
range.extractContents(); //提取范围内的节点，范围变成空范围
range.deleteContents(); //删除范围内的节点，范围变成空范围
range.insertNode(node); //将指定的节点插入到范围中
range.surroundContents(element); //将范围内的节点用指定的元素包裹起来

4.设置和获取范围内的文本：

range.toString(); //获取范围内的文本
range.deleteContents(); //删除范围内的节点，范围变成空范围
range.insertNode(node); //将指定的节点插入到范围中
range.setStart(startNode, startOffset); //设置起点
range.setEnd(endNode, endOffset); //设置终点