HTML5学习笔记8-编辑API之Range对象（一）

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

1、selection对象与Range对象的使用

    
    <input type="button" value="点击我" οnclick="rangeTest()">
    <div id="showRange"></div>
    <script>
        function rangeTest(){
            var html;
            var showRangeDiv=document.getElementById("showRange");
            var selection=document.getSelection();
            if(selection.rangeCount>0){
                html="您选取了>"+selection.rangeCount+"<内容</br>";
                for(var i=0;i<selection.rangeCount;i++){
                 var range=selection.getRangeAt(i);
                 html+="第"+(i+1)+"段内容为:"+range+"</br>"
                 }
                showRangeDiv.innerHTML=html;
            }
        }
    </script>

2、selectNode、selectNodeContents、deleteContents方法

    <div id="div" style="background-color: dimgray;width: 300px;height: 50px;">
        元素内容
    </div>
    <button οnclick="deleteRangeContent(true)">删除内容</button>
    <button οnclick="deleteRangeContent(false)">删除元素</button>
    <script>
        function deleteRangeContent(isAll){
            var div=document.getElementById("div");
            var rangeobj=document.createRange();
            if(isAll){
               rangeobj.selectNodeContents(div);
                rangeobj.deleteContents();
            }else{
                rangeobj.selectNode(div);
                rangeobj.deleteContents();
            }
        }
    </script>

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

    <div id="mydiv" style="color: darkred;">
        用于删除的文字用于删除的文字用于删除的文字
    </div>
    <input type="button" value="删除" οnclick="deleteChar()">
    <script>
        var textNode=document.getElementById("mydiv").firstChild;
        var rangeObj=document.createRange();
        function deleteChar(){
            rangeObj.setStart(textNode,1);
            rangeObj.setEnd(textNode,4);
            rangeObj.deleteContents();
        }
    </script>

    <table id="mytable" border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>
        <tr>
            <td>内容3</td>
            <td>内容4</td>
        </tr>
    </table>
    <button οnclick="deleteRow()">删除第一行</button>
    <script>
        function deleteRow(){
            var table=document.getElementById("mytable");
            if(table.rows.length>0){
                var row=table.rows[0];
                var rangeObj=document.createRange();
                rangeObj.setStartBefore(row);
                rangeObj.setEndAfter(row);
                rangeObj.deleteContents();
            }
        }
    </script>