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

最新文章

  1. C# 各种字符串格式
  2. ASP.NET Core 获取控制器上的自定义属性
  3. Java 调用 Javascript 函数的范例
  4. Storm实战常见问题及解决方案
  5. HW6.19
  6. Angular源代码学习笔记-原创
  7. 把python文件编译成exe文件
  8. &lt;C++Primer&gt;第四版 阅读笔记 第四部分 “面向对象编程与泛型编程”
  9. 初学python必备基础知识
  10. JDK和CGLIB动态代理区别
  11. Java使用SFTP协议上传、下载文件
  12. Codeforces 906 D. Power Tower
  13. 【转】目标检测之YOLO系列详解
  14. 结合Ajax做地区内容切换!(城市切换)
  15. 点击除指定元素以外的任意地方隐藏js
  16. 【找规律】HDU 4662——MU Puzzle
  17. [Python] Regular Expressions
  18. C++(笔)001.
  19. centoOS下安装python3 和 pip: command not found
  20. 剑指Offer - 九度1524 - 复杂链表的复制

热门文章

  1. 【Sort】HeapSort
  2. Java IO 过滤流 BufferedInput/OutputStream
  3. hdu_2328_Corporate Identity(暴力枚举子串+KMP)
  4. Java 相关注意事项小结
  5. spring容器启动的加载过程(二)
  6. apicloud教程3 (转载)
  7. ios 测试工程是否内存泄漏
  8. php 关了浏览器也可以自动运行脚本
  9. 用非GUI模式执行测试,jp@gc - PerfMon Metrics Collector会出现无法获取正确数据的解决办法
  10. 如何在VS2013中显示代码行号