selectNode、selectNodeContents 区别

SelectNode()

range对象的SelectNode将用于range对象起点指定于某个节点的起点，将range对象的终点指定于该对象的终点，使range对象所代表的区域中包含该节点，该方法并不把该节点设为高亮选取状态。

**设置该方位的边界点，使它包含指定节点和它所有子孙节点

语法：selectNode(refNode)

SelectNodeContents()

range对象的SelectNodeContents方法将于range对象起点指定为某个节点中的所有内容的起点，将range对象终点指定为该节点中的所有内容的终点，使range对象代表的区域中包含该节点所有内容。

**设置该范围的边界点，使它包含指定节点的子孙节点，但不包含指定的节点本身

方法：selectNodeContents(refNode)

deleteContents()

range对象的deleteContents方法用于将range对象所包含的内容从页面中进行删除。

方法：deleteContents()

cloneRange()

创建一个新的Range对象，表示与当前的Range对象想同的文档区域

<script>
     function deleteRangeContent(onlyContent){
      var content = document.getElementById("content");
      var rangeObj = document.createRange();

       if(onlyContent){
           rangeObj.selectNodeContents(content)
           rangeObj.deleteContents();
        }else{
           rangeObj.selectNode(content);
           rangeObj.deleteContents();
        }}
</script>
<section id="content" style="background-color:aquamarine; width:200px; height:100px;">
    element 
</section>
<input type="button" value="delete content" οnclick="deleteRangeContent(true)">
<input type="button" value="delete element" onclick ="deleteRangeContent(false)"

deleteContents()