04.HTML5编辑API—Range对象

1.基本概念

一个Range对象代表页面上的一段连续区域。通过Range对象，可以获取或修改网页上的任何区域。

• 获取选中区域

let selection=document.getSelection();

• rangeCount属性：表示已选中的区域数

select.rangeCount

2.Range对象的方法

2.1 selectNode()、selectNodeContent()、deleteContents()方法。

• 创建Range对象

let rangeObj=document.createRange();

• 选中元素selectNode

let div=document.getElementById("");
rangeObj.selectNode(div)；

• 选中元素中的内容selectNodeContent

rangeObj.selectNodeContent(div)

只是选中了div中的内容，这里是文字。

• 删除选中部分deleteContents()

rangeObj.deleteContents();

删除内容
删除元素

2.2 setStart、setEnd、setStartBefore、setStartAfter、setEndBefore、setEndAfter方法

setStart:设置选中开始位置
setEnd:设置选中结束位置

setStartBefore:设置选中的开始位置在传入元素之前
setEndAfter:设置选中的结束位置在传入元素之后

2.3 cloneRange、cloneContents、extractContents方法。

• cloneRange：复制选中区域

  
  cloneRange()方法

• cloneContents:复制选中的内容

  
  

• extractContents:

  
  

2.4collapse、detach方法

• collapse方法：参数为true，表示选中；参数为false，表示取消选中

  
  
• detach方法:释放range对象，不能再一次访问。

2.5 insertNode、compareBoundaryPoints方法

• insertNode 选中range插入元素

  
  按钮随选中部分变化

• compareBoundaryPoints:比较功能