通过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. ubuntu下安装了express2.5.8,如何更新它?

    在ubuntu上通过apt-get install node-express,结果发现它的版本是2.5.8. 想安装express4.0+的版本,一直不能正确安装,所以一时兴起,打算先删掉它,再重新安 ...

  2. python实现最简单的计算器功能源码

    import re def calc(formula): formula = re.sub(' ', '', formula) formula_ret = 0 match_brackets = re. ...

  3. HttpFox

    HttpFox是Firefox的插件,可以用于HTTP分析. https://addons.mozilla.org/en-US/firefox/addon/httpfox/   安装   1. 打开F ...

  4. bootstrap按钮样式

    <a class='btn' href='javascript:;'>常规按钮</a> <a class='btn btn-small' href='javascript ...

  5. .Net程序员之不学Java做安卓开发:奇怪的Java语法

    1.final关键字:用以修饰类时,表示类不可以被继承,指向基本数据类型或者引用类型时,该类只可以在声明的时候初始化 2.@Override 类似C# 中override关键字,表示对父类的重写.网上 ...

  6. Stanford Prof. Li Feifei写给她学生的一封信

    De-mystifying Good Research and Good Papers By Fei-Fei Li, 2009.03.01 Please remember this: 1000+ co ...

  7. spring-data-jpa 方法名关键字的命名规范

  8. Android课程---关于数据存储的学习（3）之数据库和事务

    DataActivity3.java package com.hanqi.test5; import android.content.ContentValues; import android.dat ...

  9. 代码自定义双色title的按钮

    所图所示,通过代码自定义这样的按钮. .h文件 // // CustomButtom.h // testPlus // // Created by 鹰眼 on 14/10/20. // Copyrig ...

  10. Linux下的Finger指令

    Linux finger命令 Linux finger命令可以让使用者查询一些其他使用者的资料.会列出来的资料有: Login Name User Name Home directory Shell ...