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