Range对象

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

<html>
    <head>
        <meta charset="UTF-8">
        <title>
        range demo
        </title>
        <meta charset="UTF-8"></head>
    </head>
    <body>
        <h3>Range与Selection对象的应用</h3>
        <input type="submit" value="click me!" onclick="rangeTest()">
        <div id="showRange"></div>
        <script>
            function rangeTest(){
                var html;//定义一个html变量来承载div中的内容
                showRange = document.getElementById("showRange");
                Selection = document.getSelection();//获取selection对象
                if(Selection.rangeCount>0){   
                //判断选取了selection选择了几块区域，firefox浏览器按ctrl键可选择2块区域；safari和chrome只能选择1块区域
                    html="您选择了"+Selection.rangeCount+"块区域的内容<br/>";
                    for(var i=0;i<Selection.rangeCount;i++)
                    {   
                        var range = Selection.getRangeAt(i); //获取range对象
                        html+="第"+(i+1)+"段内容为："+range;
                    }
                }
                    showRange.innerHTML = html;
            }
        </script>
    </body>
</html>

Range方法之selectNode、selectNodeContents、deleteContents方法

选取一块区域

<html>
    <head>
        <meta charset="UTF-8">
        <title>
        selectNode、selectNodeContents、deleteContents demo
        </title>
    </head>
    <body>
        <div id="div" style="background-color: aqua;width: 200px;height: 200px;">删除内容或者元素</div>
        <button onclick="deleteContents(true)">删除内容</button>
        <button onclick="deleteContents(false)">删除元素</button>
        <script>
            function deleteContents(onlyContent){
                var div = document.getElementById('div');
                var rangeObj = document.createRange();  //创建range对象
                if(onlyContent){
                    rangeObj.selectNodeContents(div);  //选择div元素中的内容。selectNodeContents的选择是从元素中内容的开始到内容的结束
                    rangeObj.deleteContents();         //删除div中的内容
                }else{
                    rangeObj.selectNode(div);          //选择div元素。selectNode的选择是从元素的开始到元素的结束。注：这里选择的是整个元素及里面的内容
                    rangeObj.deleteContents();         //删除div元素及其内容
                }
            } 
        </script>
    </body>
</html>

Range方法之setStart、setEnd方法

setStart表示某个节点的range对象的起点位置，
setEnd表示某个节点的range对象的终点位置

<html>
<head>
    <meta charset="UTF-8">
    <title>
        setStart、setEnd demo
    </title>
</head>
<body>
    <div id="myDiv" style="color:brown;">
        这是待删除的内容
    </div>
    <button onclick="deleteChar()">click me</button>
    <script>
        function deleteChar() {
            var div = document.getElementById("myDiv");
            var textNode = div.firstChild;          //div.firstChild:返回div的文档的首个子节点
            var rangeObj = document.createRange();
            rangeObj.setStart(textNode, 1);          //div的文档的首个子节点的第一个字段为起点
            rangeObj.setEnd(textNode, 4);            //div的文档的首个子节点的第四个字段为终点
            rangeObj.deleteContents();               //删除选中的内容 
        }
    </script>
</body>
</html>

Range方法之setStartBefore、setEndAfter、setStartAfter、setEndBefore

setStartBefore:表示用于将某个节点的起点位置设置为range对象的起点位置。
setStartAfter:表示用于将某个节点的终点位置设置为range对象的起点位置。
setEndBefore:表示用于将某个节点的起点位置设置为range对象的终点位置。
setEndAfter:表示用于将某个节点的终点位置设置为range对象的终点位置。

<html>

<head>
    <meta charset="UTF-8">
    <title>
      setStartBefore、setEndAfter demo
    </title>
</head>
<body>
    <table id='myTable' border="1px" cellspacing='0' cellpadding='0'>
        <thead>
            <td>第一列</td>
            <td>第二列</td>
        </thead>
        <tbody>
            <td>1</td>
            <td>2</td>
        </tbody>
    </table>
    <button onclick="deleteRow()">click me</button>
    <script>
        function deleteRow(){
            var table = document.getElementById("myTable");
            if(table.rows.length>0){        //判断表格的行数是否大于0
                row = table.rows[0];        //获取表格的第一行
                var rangeObj = document.createRange();
                rangeObj.setStartBefore(row);
                rangeObj.setEndAfter(row);
                rangeObj.deleteContents();
            }
        }
    </script>
</body>
</html>