HTML5编辑API之Range对象详解及应用-优快云博客

本文链接：https://blog.youkuaiyun.com/thystar/article/details/50164797

html5 编辑API之Range对象 1：

Range对象代表页面上的一段连续的区域：

Selection对象和Range对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        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="click" onclick="rangeTest()">
    <div id="showRange"></div>
</body>
</html>

SelectionNode，range对象的起点指定为某个节点的起点，range对象的终点指定为该节点的终点，使range对象包含该节点；

SelectionNodeContents , range对象的起点指定为某个节点中所有内容的起点；range对象的终点指定为该节点中所有内容的终点；

deleteContents方法：将range对象包含的内容删除

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function deleteRangeContent(onlyContent){
        var div = document.getElementById("div");
        var rangeObj = document.createRange();
        if(onlyContent){
            //删除节点的内容
            rangeObj.selectNodeContents(div);//选中的是节点中的内容
            rangeObj.deleteContents();
 
        }else{
            //删除整个节点
            rangeObj.selectNode(div);//选中的是整个节点
            rangeObj.deleteContents();
        }
    }
</script>
<div id="div" style="background-color: aqua; width: 300px; height: 50px">
    元素中的内容
</div>
<button onclick="deleteRangeContent(true)">删除内容</button>
<button onclick="deleteRangeContent(false)">删除元素</button>
 
</body>
</html>

setStart, 指定range对象的起点

setEnd，。。。。。终点。

等方法：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function deleteChar(){
        var div = document.getElementById("myDiv");
        var textNode = div.firstChild;
        var rangeObj = document.createRange();
        rangeObj.setStart(textNode,1);
        rangeObj.setEnd(textNode,4);
        rangeObj.deleteContents();
    }
</script>
<div id="myDiv" style="color: crimson">
    用来删除的文字
</div>
<button onclick="deleteChar()">删除文字</button>
</body>
</html>

其他方法：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<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>
<table id="myTable" border ='1' cellpadding="0">
    <tr>
        <td>内容</td>
        <td>内容</td>
    </tr>
    <tr>
        <td>内容</td>
        <td>内容</td>
    </tr>
    <tr>
        <td>内容</td>
        <td>内容</td>
    </tr>
</table>
<button onclick="deleteRow()">删除第一行</button>
</body>
</html>

html5学习笔记(7)