通过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. 更改机器名后，打开TFS提示工作区错误的处理

    1,打开vs下的"开发人员命令提示"2,按下面格式输入命令:tf workspaces 查看, 假设显示如下: C:\Program Files (x86)\Microsoft V ...

  2. oracle导出一条二进制数据（二进制,long只能通过dmp导出）

    exp jxfoc/JXFOC@ORCL file=d:\dd.dmp tables=(jxfoc.FLIGHT_PLAN_MAKE_LOG,jxfoc.METAR_CONTENT_FOR_MAIL) ...

  3. java学习-关于字符串String

    有必要总结记录一下java的学习,否则,永远只是记忆碎片化和always google(费时) 刚好,小伙伴给了一份自己做的review,在学习的过程中,update一下自己的见解和学习内容: 关于S ...

  4. Web开发者需养成的好习惯

    Web开发者需养成的8个好习惯 每个行业有着每个行业的标准和一些要求,自己只是一个进入前端领域的小白,但是深刻的知道,习惯很重要,就Web开发分享一下,要养成的一些好的习惯. 优秀的Web开发人员工作 ...

  5. centos上安装pygame

    安装前依赖包检查及安装 python-devel SDL_image-devel SDL_mixer-devel SDL_ttf-devel SDL-devel numpy subversion po ...

  6. oracle--导出、导入blob类型的字段

    blob是oracle中的一个数据类型,保存的是压缩后的二进制形式的大数据. 数据迁移如果涉及到blob字段,都不好处理,因为无法用常规方法进行操作,如:使用select查看该字段,也无法用inser ...

  7. html、canvas、视频灰度、反色

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. MaxTemperature程序Mapper ClassNotFoundException

    错误: 执行hadoop权威指南上MaxTemperature程序出现Mapper类ClassNotFoundException异常: 解决: 将书上的 JobConf job = new JobCo ...

  9. final 140字评论

    按照演讲顺序 1.约跑app         个人感觉约跑现在做的已经很不错了,要是能添加地图就更好了. 2.礼物挑选         给人感觉在一定的时间做到这个程度,很不错很好,讲的声音有点小. ...

  10. HDFS Client 设计实现解析

    前面对 HDFS NameNode 和 DataNode 的架构设计实现要点做了介绍,本文对 HDFS 最后一个主要构成组件 Client 做进一步解析. 流式读取 HDFS Client 为客户端应 ...