Range API

Range 接口表示一个包含节点与文本节点的一部分的文档片段。

可以用 Document 对象的 Document.createRange 方法创建 Range。

Range 对象暴露了一系列的属性和方法来让用户了解和操作此对象。

属性

[Range.endContainer](https://developer.mozilla.org/zh-CN/docs/Web/API/Range/endContainer) 只读

返回包含 Range 终点的节点。

Range.endOffset 只读

返回一个表示 Range 终点在 endContainer 中的位置的数字。

Range.startContainer 只读

返回包含 Range 开始的节点。

Range.startOffset 只读

返回一个表示 Range 起点在 startContainer 中的位置的数字。

方法

Range.setStart()

设置 Range 的起点。

Range.setEnd()

设置 Range 的终点。

Range.deleteContents()

从文档中移除 Range 包含的内容。

Range.insertNode()

在 Range 的起点处插入一个节点。

注意点

1. insertNode 和 deleteContents 会修改当前 range 对象的 endOffset 属性值；

2. insertNode 和 deleteContents 会修改相邻 range 对象的 startOffset 和 endOffset 属性值；

3. 前一个 range 删除后，再添加时，会将新添加的有内容的 range 作为一个节点放到后一个 range 中，后一个 range 的 endOffset 会修改，strartOffset 不做修改；

     var parent = document.getElementsByClassName('board-row')[0];      var range1 = document.createRange();      var range2 = document.createRange();       var range3 = document.createRange();
     var button1 = document.createElement('button');      
         button1.innerText = '111111'      
     var button2 = document.createElement('button');      
         button2.innerText = '22222'      
     var button3 = document.createElement('button');      
         button3.innerText = '333333'
     var btn = document.createElement('button');     
         btn.innerText = 'addddd';       range1.setStart(parent, 0); 
      range1.setEnd(parent, 0);       range1.insertNode(button1);
      // insertNode() 之后， range1 的 endOffset 变成了 1       range2.setStart(parent, 1); 
      range2.setEnd(parent, 1);
      range2.insertNode(button2);       // insertNode() 之后， range2 的 endOffset 变成了 2       range3.setStart(parent, 2); 
      range3.setEnd(parent, 2);
       range3.insertNode(button3);       // insertNode() 之后， range2 的 endOffset 变成了 3
      
      range1.deleteContents();
      // 此步之后， range2 的 startOffset 变成了 0（之前为 1）,endOffset 变成了 1（之前为 2）
      // range3 的 startOffset 变成了 1（之前为 2）,endOffset 变成了 2（之前为3）
      
      range1.insertNode(btn);
      // 此步之后， range1 的 endOffset 变成了 1（之前为 0）
      // range2 的 startOffset 依然为 0（之前也为 0）,endOffset 变成了 2（之前为 1),相当于 range1 作为一个子节点放到了 range2 中
      // range3 的 startOffset 变成了 2（之前为 1）,endOffset 变成了 3（之前为 2）
   
   
      range2.deleteContent() // 此步会将 range1 和 range2 中包含的内容都删除
   
      // 如何解决此问题
      var range4 = document.createRange();
      range4.setStart(range1.startContainer, range1.startOffset);
      range4.setEnd(range1.startContainer, range1.startOffset); 
      range4.insertNode(btn);
      
      range1.setStart(range4.endContainer, range4.endOffset);
      range1.deletContent();