HTML5 编辑 API 之 Range 对象（一）

来源：互联网发布：mac如何绕开百度云盘编辑：程序博客网时间：2024/06/04 23:04

</pre><pre style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);">

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>HTML5 编辑 API 之 Range 对象（一）</title>    <style>        #content{            width:100%;            height: 50px;            background-color:#cccccc;        }    </style></head><body>    selection对象与range对象的引用    <input type="button" value="click" onclick="rangeTest()">    <div id="showRange"></div>    <div id="content">        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈    </div>    <button onclick="deleteRangeContent(true)">删除元素</button>    <button onclick="deleteRangeContent(false)">删除结点</button>    <div id="myDiv">        这段文字是用来删除的    </div>    <button onclick="deleteChar()" value="delete">delete</button>    <script>        function rangeTest() {            var html ;            showRangeDiv = document.getElementById("showRange");            selection = document.getSelection();//创建selection对象            if(selection.rangeCount>0){                /* 当用户没有按下鼠标时候，该参数的值为0.             当用户按下鼠标的时候，该参数值为1.             当用户使用鼠标同时按住ctrl键时选取了一个或者多个区域时候，该参数值代表用户选取区域的数量。             当用户取消区域的选取时，该属性值为1，代表页面上存在一个空的Range对象；*/                html = "你选取了"+selection.rangeCount+"段内容<br/>";                for(var i=0;i<selection.rangeCount;i++){                    var range = selection.getRangeAt(i);//获取selection对象的range对象getRangeAt(index)                    html+="第"+(i+1)+"段内容为：“"+range+"”<br/>";                }                showRangeDiv.innerHTML = html;            }        }        function deleteRangeContent(onlyContent) {            var getDiv = document.getElementById("content");            var rangeObj = document.createRange();            if(onlyContent){                rangeObj.selectNodeContents(getDiv);                rangeObj.deleteContents();//删除所选中的内容（结点或结点内内容）            }else{                rangeObj.selectNode(getDiv);                rangeObj.deleteContents();            }        }        function deleteChar() {            var div = document.getElementById("myDiv");            var textNode = div.firstChild;            var rangObj = document.createRange();            rangObj.setStart(textNode,0);            rangObj.setEnd(textNode,4);            rangObj.deleteContents();        }    </script></body></html>

1 0