selection与range笔记
selection对象代表当前激活选中区，通常是高亮的文本块
创建选中区:
1.拖拽文本
2.脚本创建 cerateRange()
获取selection对象
IE document.selection()
非IE window.getSelection()
eg:
<div>请选中这里的部分文字。</div>
<div>
<input type="button" value="加粗" onclick="select()" />
</div>
<script>
function select() {
var a = window.getSelection();
console.log(typeof a.anchorNode);
}
</script>
输出Selection对象
属性:
anchorNode：包含起点的节点，不存在则为null（注意一段文本就是一个节点！包括p内的文本，a，div等标签内的文本，不包括输入框内的文本！！）
anchorOffset：起点在anchorNode中的偏移量
focusNode：包含结束点的节点，不存在则为null
focusOffset：结束点在focusNode中的偏移量，focusOffset可以比anchorOffset小，只要从后向前选择
isCollapsed：起点和结束点是否重合
rangeCount：selection中range的数目，一般一个，ctrl键配合多个
-------------------------------------------------------------------------------------------------------------------------------------
方法:
1.getRangeAt(index)
从当前selection中获取某一个range对象
2.collapse(parentNode, offset)
将开始和结束点合并到parentNode的offset位置，多用于改变可编辑div的焦点，，，
3.extend(parentNode, offset)
将结束点移动到parentNode的offset位置
4.collapseToStart()
将结束点移动到selection的起点，注意是selection的起点而不是开始点，意味着只会向前不会向后，多用于取消选中状态，多个range时也是如此
5.collapseToEnd()
将开始点移动到selection的结束点
6.selectAllChildren(parentNode)
将parentNode的所有后代变成selection，原有的selection被抛弃，可用于全选
7.addRange(range)
将range添加到selection中，注意chrome中只能有一个range
8.removeRange(range)
从selection中移除range
兼容性:不佳，亲测只有IE可以
9.removeAllRanges()
移除所有的range，多用于取消选择状态
10.toString()
返回selection的纯文本，也就是返回选中区域的文本内容
11.containsNode(aNode,aPartlyContained)
判断一个节点是不是selection的一部分
aNode要判断的节点
aPartlyContained true 只要有一部分属于就返回true false 全部属于才返回true
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
range对象:
属性:
collapsed:此Range对象代表的区域开始点和结束点是否已合并
commonAncestorContainer:此Range对象代表的整体区域位于哪个节点(元素或一段文本)
startContainer:此Range对象的开始点位于哪个节点
startOffset:返回此Range对象代表的区域的起点在startContainer中的位置，返回整数
endContainer:此Range对象的结束点位于哪个节点
endOffset:返回此Range对象代表的区域的结束点在endContainer中的位置
方法:
document.createRange() 创建Range对象
Range初始化
selectNode(node) 选择文档的一部分
将整个node节点的信息，包括node本身填充进Range
selectNodeContents(node)
将整个弄的节点内的信息，不包括node本身，填充进Range
值得注意的是，用脚本创建Range不会像手动一样使选中部分变蓝！
操作Range
deleteContents()
从文档中彻底删除Range区域的内容
extractContants()
从文档中提取Range区域的内容，返回值为提取的内容，可以对返回值进行操作，例如插入页面其他地方
cloneRange()
复制Range区域
detach()
分类该区域
-----------------------------------------------------------------------------------------------------------------------
低版本IE兼容
创建Range (低版本IE只支持文本Range)
document.body.createRange()
初始化
findText(string)
找到第一次出现的给定文本，并将范围移过来环绕文本。如果找到文本返回true，否则返回false.
eg: var a= document.body.createRange();
a.findText("选中此文本")；
alert(a.text);
高版本无需此法，不多解释
详情请看:http://www.cnblogs.com/zourong/p/4800922.html
