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标准下的节点
 */
 
// 创建文本范围
// 创建的元素必须是,