Notes: DOM Range

Posted 读书是一种习惯

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Notes: DOM Range相关的知识，希望对你有一定的参考价值。

通过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的主要内容，如果未能解决你的问题，请参考以下文章

Dom Range-一个@功能的具体实现

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

jQuery的DOM操作

JavaScript单行代码，也就是代码片段

实用代码片段将json数据绑定到html元素 （转）

如何突出显示 DOM Range 对象的文本？