WEB前端之HTML5[6]~HTML5编辑API之Range对象

HTML5编辑API之Range对象

Range对象的基本概念

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

<!--示例代码--><script>    function rangeTest() {        //用来显示提示信息        var html;        //获取到显示range对象的DIV        var showRangeDiv = document.getElementById("showRange");        //获取selection        var selection = document.getSelection();        //selection 的 rangeCount属性用来获取选中的区域        //判断如果区域>0        if (selection.rangeCount > 0) {            html = "您选取了>" + selection.rangeCount + "<内容<br>";            <!--有的浏览器获取的不仅仅是一段内容-->            for (var i = 0; i < selection.rangeCount; i++) {                //传递一个参数，代表range对象的序号，也就是我们选中的区域有几个。                // 在chrome浏览器和苹果浏览器中，用户在一段内容中只能选取一段区域。Firefox可以选取多段                var range = selection.getRangeAt(i);                html += "第" + (i + 1) + "段内容为：" + range+"<br>";            }            //把提示信息设置为showRange的内容            showRangeDiv.innerHTML = html;        }    }</script>1.Selection对象与Range对象的使用<input type="button" value="Click Me" onclick="rangeTest()"><div id="showRange"></div>

Chrome运行结果图：

Firefox运行结果图：

selectNode

Range对象的selectNode方法用于将Range对象的起点指定为某个节点的起点，将Range对象的终点指定为 该节点的终点，使Range对象所代表的区域中包含该节点，该方法并不将该节点设置为高亮选取状态，如果想要设置一个选取的节点，还需要使用selection对象的AndRange方法

selectNodeContents

Range对象的selectNodeContents方法，将用于Range对象的起点指定为某个节点中的所有内容的起点，将Range对象的终点指定为该节点中所有内容的终点，使Range对象所代表的区域中包含该节点中的所有内容。

deleteContents方法

Range对象的deleteContents方法用于将Range对象所包含的内容从页面中删除。

<!--示例代码--><script>        function deleteRangeContent(onlyContent) {            //获取DIV            var div = document.getElementById("divId");            //创建Range对象            var rangeObj = document.createRange();            if(onlyContent){                //获取节点的内容                rangeObj.selectNodeContents(div);                //删除节点的内容                rangeObj.deleteContents();            }else{                //获取节点                rangeObj.selectNode(div);                //删除节点                rangeObj.deleteContents();            }        }</script><div id="divId" style="background-color: #f99002 ;width: 300px; height: 50px;">    元素中的内容</div><button onclick="deleteRangeContent(true)">删除内容</button><button onclick="deleteRangeContent(false)">删除元素</button>

运行结果图：

setStart/setEnd

Range对象的setStart方法用于将某个节点中的某处位置指定为Range对象所代表区域的起点位置。使用方法是通过Range对象来调用方法，传入两个参数。
Range对象的setEnd方法是用于将某个节点中的某处位置指定为Range对象所代表区域的结束位置，使用方法与setStart方法相对应。

<!--示例代码--><script>        function deleteTxt() {            //获取div元素            var div = document.getElementById("myDiv");            //获取需要删除的内容            var txtNode = div.firstChild;            //创建一个Range对象            var rangeObj = document.createRange();            //设置Range对象的开始位置.            rangeObj.setStart(txtNode,1);   //参数1：需要操作的内容。参数2：开始的位置。            //设置Range对象结束的位置            rangeObj.setEnd(txtNode,3); //同上            //删除            rangeObj.deleteContents();        }</script><div id="myDiv">    This is Content...</div><button onclick="deleteTxt()">删除文字</button>

运行结果图：<不知什么问题，要多点几次才有效果..>

setSeartBefore/setStartAfter

Range对象的setStartBefore方法用于将某个节点的起点设置为Range对象所代表区域的起点位置。
setStartAfter方法用于将某个节点的终点位置设置为Range对象所代表区域的起点位置。

setEndBefore/setEndAfter

setEndBefore方法用于将某个节点的起点位置设置为Range对象所代表区域的终点位置。
setEndAfter方法用于将某个节点的终点位置设置为Range对象所代表区域的终点位置。

<!--示例代码--><script>    function deleteRow() {        //获取table元素        var table = document.getElementById("myTable");        //判断表格的行数是不是大于0，如果大于0，则删除        if (table.rows.length > 0) {            //获取第一行            var row = table.rows[0];            //创建Range对象            var rangeObj = document.createRange();            //设置起点位置为row元素的起点位置            rangeObj.setStartBefore(row);            //设置终点位置为row元素的终点位置            rangeObj.setEndAfter(row);            //删除元素            rangeObj.deleteContents();        }    }</script><table id="myTable" border="1" cellpadding="10" cellspacing="0">    <tr>        <td>内容1</td>        <td>内容2</td>    </tr>    <tr>        <td>内容3</td>        <td>内容4</td>    </tr></table><button onclick="deleteRow()">删除第一行</button>

运行结果图：

http://www.2345cms.com
【未完，待续】