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

原文地址:https://www.cnblogs.com/yanze/p/6001951.html