Range对象介绍

Range对象

---

• Selection对象
• • 代表用户鼠标在页面中所选取的区域。
  • 每一个浏览器窗口中都有一个selection对象。
  • 创建：var selection = document.getSelection();
• Range对象
• • 代表用户所选取的一段连续区域。
  • 一个Selection对象中包含一个或者多个Range对象。Firefox中可包含多个Range对象，其他浏览器只能有一个。
  • 创建：var range = document.createRange();
  • 可以通过Selection对象的getRangeAt(index)方法获取Selection对象中Range对象。
  • 通过Selection对象的rangeCount参数判断 是否选取了内容。
  • • 鼠标未点击时，该值为0。
    • 鼠标按下时，该值为1。在Firefox上同时按下Ctrl选择多个区域时，该值为选取区域的数量。
    • 鼠标取消选取是，该值为1，表示页面留存一个空的Range对象。
• Range方法（选取）
• • selectNode() 选取指定的节点
  • selectNodeContents() 选取指定节点中的内容
  • deleteContents() 删除Range对象的内容
  • setStart(node,index)
  • • setStartBefore(node) ：指定节点前作为Range对象的开始，Range对象包括的区域包含指定节点。
    • setStartAfter(node)
  • setEnd(node,index)
  • • setEndBefore(node)
    • setEndAfter(node)
  • Tips：所谓“节点”可看作一个区块元素。
• Range方法（获取）
• • cloneRange() 克隆一个Range对象。
  • cloneContents() 克隆一个Range对象所包含的内容，包括HTML。
  • extractContents() 摘取（剪切）一个Range对象。
  • insertNode() 在所选取的起始位置插入节点。
  • compareBoundaryPoints(how, soureRange) 比较两个区域的边界点，sourceRange为要与当前区域比较的区域。how值如下：
  • • Range.START_TO_START
    • Range.START_TO_END ：用sourceRange的起始位置与当前区域的结束位置进行比较
    • Range.END_TO_START
    • Range.END_TO_END
    • sourceRange指定的临界点位于当前区域指定的临界点之前返回1，之后返回-1，相同返回0。
  • collapse
  • detach() 释放Range对象
• Tips
• • document.getElementById()选取的是对象本身。
  • jQuery通过Id选取的结果是包含结果的数组。

自己的见闻周更

有兴趣的朋友感谢关注下捧捧场