[html5] 学习笔记-编辑 API 之 Range 对象（一）

时间：2023-03-08 16:17:26

1、Range对象的基本概念

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

 <!DOCTYPE html>
 <html>
 <head>
 <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="点击我" onclick="rangeTest()"></input>
     <div id="showRange"></div>
 </body>
 </html>

2、Range对象的SelectNode方法，SelectNodeContents方法，deleteContents方法

SelectNode方法用于将Range对象的起点，指定为某个节点的起点，将Range的终点，指定为该节点的终点，使Range对象的区域包含该节点。

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

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

 <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:#e0a0b0;width=300px;height=50px">
         元素中的内容
     </div>
     <button onclick="deleteRangeContent(true)">删除内容</button>
     <button onclick="deleteRangeContent(false)">删除元素</button>
 </body>

3、Range对象有很多用来操作页面内容的方法，有setStart、setEnd、setStartBefore、setStartAfter、setEndBefore、setEndAfter方法

setStart用来将某个节点的某个位置，设置为Range对象的起点位置

setEnd用来将某个节点的某个位置，设置为Range对象的结束位置

 <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:red">这段文字是用来删除的</div>
     <button onclick="deleteChar()">删除文字</button>
 </body>

setStartBefore用于将某个节点的起点位置，设置为Range对象所代表区域的起点位置

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

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

setEndAfter用于将某个节点的终点位置，设置为Range对象所代表区域的终点位置

 <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" cellspacing="0" cellpadding="0">
         <tr>
             <td>内容1</td>
             <td>内容2</td>
         </tr>
         <tr>
             <td>内容3</td>
             <td>内容4</td>
         </tr>
     </table>
     <button onclick="deleteRow()">删除第一行</button>
 </body>

相关文章