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()
发布了84 篇原创文章 · 获赞 6 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 终极编程指南 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览