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>

[html5] 学习笔记-编辑 API 之 Range 对象（一）的更多相关文章

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

    本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment ...

  2. HTML5 页面编辑API之Range对象

    在 HTML5 中,一个 Range 对象代表页面上的一段连续区域.通过 Range 对象,可以获取或修改页面上的任何区域.包含获取,修改,删除和替换等操作. 一:获取range对象的值 Range对 ...

  3. HTML5编辑API之Range对象

    Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = document.createRa ...

  4. HTML5 编辑 API 之 Range 对象（一）

     一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE h ...

  5. HTML5 编辑 API 之 Range 对象（二）

    1.Range.cloneContents()The Range.cloneContents() returns a DocumentFragment copying the objects of t ...

  6. Java学习笔记之---API的应用

    Java学习笔记之---API的应用 (一)Object类 java.lang.Object 类 Object 是类层次结构的根类.每个类都使用 Object 作为超类.所有对象(包括数组)都实现这个 ...

  7. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  8. 学习笔记：Javascript 变量 包装对象

    学习笔记:Javascript 变量 包装对象 如下代码,可以输出字符的长度. var str = "Tony"; str.length; 这时再试试以下代码,返回是 undefi ...

  9. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. iOS之NSDictionary和NSArray以及NSMutableDictionary和NSMutableArray：将不再是问题

    字典的key就相当于数组的下标,怎样操作数组你就学会了怎样才做字典:来感受一把 需要注意的是读取文件的类型要集合.plist文件的rooty:否则将不能读入文件 // 1.全国省市:得到的是省和市 / ...

  2. 关于iOS自定义控件：在view上实现事件和代理

    自定义控件.h #import <UIKit/UIKit.h> #import "PPViewtouchesBeginDelegate.h" @interface PP ...

  3. 关于NSNumber对C语言字符串的简写

    2.关于NSNumber对C语言字符的简写 - 简写:对字符串进行操作返回的是NSString类型 NSLog(@"%@", @("purple")); > ...

  4. awk简单用法

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  5. ue4中窗口打开web地址

    首先打开项目,设置,widgets,启用webbroswer 新建一个蓝图, 在控件栏里就可以找到添加webbroswer 设置initial url就可以打开网页了, 项目中还用到获取界面参数,与界 ...

  6. linux下安装部署环境：jdk、tomcat、nginx

    一.安装jdk 一.查看Linux自带的JDK是否已安装 1.查看已经安装的jdk: # rpm -qa|grep jdk                ← 查看jdk的信息或直接执行 或 # rpm ...

  7. VB.NET中的常用方法

    一.如何使用dll库: dll库是动态链接库,一般是别人提供的,用来做二次开发,相当于别人把一些函数包装在dll中,已经生成可以链接文件,你只能调用,但是不能看到方法的实现.所以给你提供dll的人一般 ...

  8. tap是什么意思

    分光是数据通过光纤传输:分路是数据通过网线传输.粗浅的说,Tap的概念类似于“三通”的意思,即原来的流量正常通行,同时分一股出来供监测设备分析使用. 其实这只是最简单的Tap的概念,目前的技术发展已经 ...

  9. YII 数据库,模型，登录验证

    //protected/config/main.php //数据库连接设置 'db'=>array( 'connectionString' => 'mysql:host=localhost ...

  10. cf747 D. Winter Is Coming

    天呢,这个题2333333,真是被各种卡.完蛋完蛋完蛋.IQ------------: #include<bits/stdc++.h> #define lowbit(x) x&(- ...