HTML 5 编辑 API 之 Range 对象（一）

range对象：ange对象的基本概念：一个range对象代表页面上的一段连续区域。通过=range对象，可以获取或修改网页上的任何区域。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>range对象</title>
</head>
<body>
<script type="text/javascript">
    function rangeTest(){
        var html;
        showRangeDiv = document.getElementById('showRange');
        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>
Selection对象与Range对象的使用
<input type="button" value="点击我" onclick="rangeTest()"/>
<div id="showRange"></div>
</body>
</html>

range对象中的SelectNode方法：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>range对象中的SelectNode方法</title>
</head>
<body>

<script type="text/javascript">
    function deleteRangeContent(onlyCotent){
        var div = document.getElementById('div');
        var rangeObj = document.createRange();
        if(onlyCotent){
            rangeObj.selectNodeContents(div);
            rangeObj.deleteContents();
        }else{
            rangeObj.selectNode(div);
            rangeObj.deleteContents();
        }
    }
</script>
    <div id="div" style="background-color:#e0a0b0;width:300px;height:50px">这是内容</div>
    <button onclick="deleteRangeContent(true)">删除内容</button>
    <button onclick="deleteRangeContent(false)">删除元素</button>
</body>
</html>

range对象中的setStartBefore方法：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>range对象中的setStartBefore方法</title>
</head>
<body>

<script type="text/javascript">
    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>
    <table id="myTable" border="1" red> 
    <tr>
        <td>121212</td>
        <td>121212</td>
    </tr>
    <tr>
        <td>121212</td>
        <td>121212</td>
    </tr>
    </table>
    
    <button onclick="deleteRow()">删除第一行</button>

</body>
</html>

range对象中的SetStartEnd方法：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>range对象中的SetStartEnd方法</title>
</head>
<body>

<script type="text/javascript">
    function deleteChar(){
        var div = document.getElementById('div');
        var textNode = div.firstChild;
        var rangeObj = document.createRange();
        rangeObj.setStart(textNode,0);
        rangeObj.setEnd(textNode,1);
        rangeObj.deleteContents();
    }
</script>
    <div id="div" style="color:#e0a0b0;">这是一段测试内容</div>
    
    <button onclick="deleteChar()">删除文字</button>

</body>
</html>

 

posted @ 2016-05-05 19:18  Bob-yu  阅读(206)  评论(0)  编辑  收藏  举报