Range的学习笔记

为什么80%的码农都做不了架构师？>>>   

介绍DOM标准的Range和IE标准的Range。前者针对节点，后者针对文本。虽然少用，但可以了解下。

/**
 * DOM标准的Range
 */

// 创建范围
var range = document.createRange();

// 选择dom作为范围
range.selectNode(dom);

// 选择dom的内容/子节点作为范围
range.selectNodeContents(dom);

// 将范围起点设置在dom之前
range.setStartBefore(dom);

// 将范围起点设置在dom之后
range.setStartAfter(dom);

// 将范围终点设置在dom之前
range.setEndBefore(dom);

// 将范围终点设置在dom之后
range.setEndAfter(dom);

// 直接设置范围起点
// @param dom: startContainer。参数1，引用的节点，作为范围的startContainer
// @param offset: startOffset。参数2，起点偏移量
range.setStart(startContainer, startOffset);

// 直接设置范围终点
range.setEnd(endContainer, endOffset);

// 删除范围里的内容
range.deleteContents();

// 删除范围里的内容，并将该内容返回
range.extractContents();

// 创建范围里内容的副本
range.cloneContents();

// 插入包围范围的内容
// @param dom: 要包围范围内容的节点
// 1.抽取范围里的内容，类似extractContents()
// 2.将dom插入范围原所在位置
// 3.将文档碎片内容添加到dom中
range.surroundContents(dom);

// 清空范围，但并不删除内容，也叫折叠范围
range.collapse(true); // true就折叠在范围的开头，false就结尾
range.collapsed;      // 返回是否已被折叠了

// 比较DOM范围，compareBoundaryPoints()
// 如果第一个范围被测点在第二个范围被测点之前，返回-1；相同则返回0；如果在之后返回1
// START_TO_START(0), START_TO_END(1), END_TO_START(2), END_TO_END(3)
range1.compareBoundaryPoints(Range.START_TO_START,range2);

// 复制范围
var rangeCloned = range.cloneRange();

// 清理并销毁范围
range.detach();


/**
 * IE标准的Range
 * 在IE下，范围主要是针对文本，而不是DOM标准下的节点
 */

// 创建文本范围
// 创建的元素必须是<body/>,<button/>,<input/>,<textarea/>，而不是document
// <body/>创建的范围能在任何位置使用，其他元素创建的只能在内部使用
var range = document.body.createTextRange();

// 通过给定文本来指定范围
var found = range.findText('hello'); // 发现的第一个实例
var foundAgain = range.findText('hello', 1); // 正数表示搜索继续往前，负数表示往回搜索

// 选择特定dom的文本，包括HTML标签，类似DOM下的selectNode()
range.moveToElementText(dom);
alert(range.htmlText);

// parentElement()，类似DOM的commonAncestorContainer
var commonAncestor = range.parentElement();

// 在前面创建简单选区后，可使用move(), moveStart(), moveEnd(), expand()来进一步给范围定位
// 这些方法都接受两个参数：移动的单位和移动的单位个数
// 单位包括：'character', 'word', 'sentence', 'textedit'
range.moveStart('word', 2);
range.moveEnd('character', 1);
range.move('character', 5); // move()会先折叠范围，再移动，移动后必须再调用moveStart(),moveEnd()

// 与范围进行交互
range.text = 'hello2';
range.pasteHTML('<em>hello3</em>'); // 注意使用pasteHTML中的HTML语法正确

// 折叠范围
range.collapse(true); // true|false与DOM标准的一样

// 是否已折叠，是用boundingWidth,返回范围宽度的像素值
// 还有boundingHeight, boundingTop, boundingLeft
var isCollapsed = 0 === range.boundingWidth;

// 比较范围，类似DOM的compareBoundingPoints()
// 参数值：'StartToStart', 'StartToEnd', 'EndToEnd', 'EndToStart'
range1.compareEndPoints('StartToStart', range2);

range1.isEqual(range2); // 范围1是否与范围2完全一样
range1.inRange(range2); // 范围1包含范围2，范围2在范围1内部

// 创建范围副本
var rangeCloned = range.duplicate();

转载于:https://my.oschina.net/luozt/blog/348052