通过DOM范围可以选择文档中的某个区域，而不需考虑节点的界限，例如文本高亮的处理就可以使用范围来实现。

1、Range的创建

使用document的createRange来创建一个范围，该方法返回一个Range实例，该实例有很多属性和方法，如下所示：

startContainer：包含范围起点的节点

startOffset：范围起点在startContainer中的偏移量，既节点索引

endContainer：包含范围终点的节点

endOffset：范围终点在endContainer的偏移量，节点索引+1

检测浏览器是否支持范围

document.implementation.hasFeature('Range','2.0')  OR

typeof document.createRange === 'function'

创建范围

var range = document.createRange();
//由于IE8及以下浏览器不支持DOM Range，但是支持文本范围(document.body.createTextRange)
var range = document.body.createTextRange();

2、Range的实例方法

假设有一个HTML文档如下所示

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <div class="outer" id="outer">

    <div class="inner" id="inner1">hello world!</div>

    <div class="inner" id="inner2"><span>你好吗</span></div>

  </div>

</body>

</html>

选择文档的一部分，可以使用selectNode或者selectNodeContents方法，如下所示

var range = document.createRange();

range.selectNode(inner1);

console.log(range.startOffset);//1  因为空格被当作一个文本节点

---------------------------------------------------

var range = document.createRange();

range.selectNodeContents(outer);

console.log(range.endOffset);//5 
//IE8以下

var range = document.body.createTextRange();

range.findText("hello");

console.log(range.text);//hello

range.moveToElementText(inner1);

console.log(range.htmlText);

也可以使用setStartBefore、setStartAfter、setEndBefore、setEndAfter等方法来选择文档范围

var range = document.createRange();

range.setStartBefore(inner1);

range.setEndBefore(inner2);

console.log(range.endOffset);//3

还可以使用setStart和setEnd来选择，这两个函数均需要两个参数，一个参照节点，一个偏移量，对于setStart来说，参照节点便是startContainer，而setEnd的参照节点是endContainer

var range = document.createRange();

range.setStart(inner1,0);

range.setEnd(inner1,inner1.childNodes.length);

console.log(range.endOffset);//1
//IE8以下

range.moveStart("word", 2); //起点移动2 个单词

range.moveEnd("character", 1); //终点移动1 个字符

-----------------------------------------

"character"：逐个字符地移动。

"word"：逐个单词（一系列非空格字符）地移动。

"sentence"：逐个句子（一系列以句号、问号或叹号结尾的字符）地移动。

"textedit"：移动到当前范围选区的开始或结束位置。

操作选区中内容

1、从文档中删除选区的内容deleteContents和extractContents，他们的区别就是后者会返回删除的文档片段，如下所示

var range = document.createRange();

range.setStart(inner1.firstChild,0);

range.setEnd(inner1.firstChild,5);

//range.deleteContents();

var fragment = range.extractContents();

box.appendChild(fragment);

2、复制选区内容cloneContents，复制出来的只是范围中节点的副本，不是真实的节点

var range = document.createRange();

range.setStart(outer,0);

range.setEnd(outer,outer.childNodes.length);

var fragment = range.cloneContents();

box.appendChild(fragment);

3、向范围中插入内容insertNode或者surroundContents

var range = document.createRange();

range.selectNodeContents(outer);

var span = document.createElement('span');

span.innerText = "我知道了";

range.insertNode(span);//会在范围的开始处插入指定节点

------------------------------------------------------------------

var range = document.createRange();

range.setStart(inner1.firstChild,0);

range.setEnd(inner1.firstChild,5);

var span = document.createElement('span');

span.className = "red";

range.surroundContents(span);
//ie8以下

var range = document.body.createTextRange();

range.findText("Hello");

range.text = "Howdy";

-------------------------------------

range.pasteHTML("<em>Howdy</em>");//类似与range.surroundContents

4、复制Range和清理Range

复制range，使用cloneRange方法，该方法复制出来的是指定范围的副本；使用detach方法把范围从文档中分离，然后解除范围的引用

var range = document.createRange();

range.setStart(inner1.firstChild,0);

range.setEnd(inner1.firstChild,5);

var rangeBak = range.cloneRange();

var fragment = rangeBak.extractContents();

box.appendChild(fragment);

range.detach();

range = null;

Notes: DOM Range的更多相关文章

  1. XML DOM - Range 对象

    Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域.   dom标准Range对象 在IE中使用TextRange对象 range对象常用的建立方法在开发中 ...

  2. JS 之DOM range对象

    DOM范围 DOM中的range对象是DOM2中新定义的接口.通过这个对象可以选择文档中的某个区域,而不必考虑节点的界限. 创建范围 document.createRange()创建一个范围,这个范围 ...

  3. Notes:DOM的事件模拟

    首先使用document对象的createEvent方法创建一个事件对象,然后初始化该事件对象,接着使用支持事件DOM节点的dispatchEvent方法触发事件. DOM2级事件和DOM3级事件有些 ...

  4. 十几张表的join(千万级/百万级表) 7hours-->5mins

    ================START============================== 来了一个mail说是job跑得很慢,调查下原因 先来看下sql: SELECT h.order_ ...

  5. 百度UEditor基本使用

    1 首先奉上链接其http://ueditor.baidu.com/website/index.html 更多更详细内容在其官方api上,本文只是一个归类总结性文章. 2 下载链接http://ued ...

  6. 可编辑的DIV -编辑器

    找了好多,没几个好用的,都或多或少有问题 目前这个最好用..  不过有一个奇葩的问题,就是要放在"<a></a>"标签里面, js或者jQuery获取  $ ...

  7. Ckeditor 的加载顺序

    我们的只用在文件里面引用一个CKEditor的js文件--CKEditor目录下的ckeditor.js文件, 该文件会完成后续的所有的CKEidtor依赖的js文件的加载. 所依赖的js文件加载顺序 ...

  8. API返回错误信息的最佳实践

    使用HTTP Status区分不同消息返回 最基础的三个状态200 OK, 400 Client Error, 500 Server Error 这些应该是够的, 如果客户端可以处理更细的划分, 可以 ...

  9. UEditor API 文档

    来源:http://www.e4dai.com/ueditor-api/#ue.editor http://www.e4dai.com/ueditor-api/ UE.Editor 依赖 editor ...

随机推荐

  1. xcode 一般插件

    插件编写 xcode的插件不算多,找遍了网络也就大猫小猫而三只.不过虽然不多,但是大部分的插件都非常有用.以下5歀插件是我几台机器上都安装了并且经常使用的. 1. MiniXcode MiniXcod ...

  2. Linux上mongodb开机自启动

    1.下载MongoDB 2.安装MongoDB(安装到/usr/local下) .tgz mongodb cd mongodb mkdir db mkdir logs cd bin vi mongod ...

  3. log4net写入mysql完整例子

    1,创建表log   CREATE TABLE `log` ( `id`  int(11) NOT NULL AUTO_INCREMENT , `log_datetime`  timestamp NO ...

  4. redis主从配置及主从切换

    环境描述: 主redis:192.168.10.1 6379从redis:192.168.10.2 6380 一.主从配置 1.将主从redis配置文件redis.conf中的aemonize no ...

  5. [转]Android ListView 与 RecyclerView 对比浅析—缓存机制

    从源码角度剖析ListView 与 RecyclerView 缓存机制的不同 https://zhuanlan.zhihu.com/p/23339185 原文地址:http://dev.qq.com/ ...

  6. java-String Date Calendar之间的转换

    1.Calendar 转化 String Calendar calendat = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDa ...

  7. Node.js Ubuntu下安装

    安装 Node.js 依次执行以下指令: sudo apt-get update sudo apt-get install -y python-software-properties python g ...

  8. Html5选择本地视频音频文件播放

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. ES6(四) --- 正则 Number Math

    想学vue了  重启ES6的学习之路 在ES5 中正则的构造器  RegExp  不支持第二个参数 ES6 做了调整   第二个参数表示正则表达式的修饰符(flag) var regex = new ...

  10. 用jdbc访问二进制类型的数据

    package it.cast.jdbc; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; impor ...