Range对象代表页面上的一段连续区域，通过Range对象，可以获取或修改页面上的任何区域，可以通过如下创建一个空的Range对象，如下：

var  range = document.createRange();

在html5中，每一个浏览器窗口及每一个窗口中都有一个selection对象，代表用户鼠标在页面中所选取的区域，(注意：经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象；

var  selection = document.getSelection();     或者

var  selection  = window.getSelection();

每一个selection对象都有一个或者多个Range对象，每一个range对象代表用户鼠标所选取范围内的一段连续区域，在firefox中，可以通过ctrl键可以选取多个连续的区域，因此在firefox中一个selection对象有多个range对象，在其他浏览器中，用户只能选取一段连续的区域，因此只有一个range对象。

可以通过selection对象的getRangeAt方法来获取selection对象的某个Range对象，如下：

var range = document.getSelection().getRangeAt(index);

　getRangeAt方法有一个参数index，代表该Range对象的序列号；我们可以通过Selection对象的rangeCount参数的值判断用户是否选取了内容；

  1. 当用户没有按下鼠标时候，该参数的值为0.
  2. 当用户按下鼠标的时候，该参数值为1.
  3. 当用户使用鼠标同时按住ctrl键时选取了一个或者多个区域时候，该参数值代表用户选取区域的数量。
  4. 当用户取消区域的选取时，该属性值为1，代表页面上存在一个空的Range对象；
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>range</title>

</head>

<body>

    <script>

        function rangeTest() {

            var html;

              var  showRangeDiv=document.getElementById("showRange");

             var  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()">

    <div id="showRange"></div>

</body>

</html>

 

selectNode方法：Range对象的selectNode方法用于将Range对象的起点指定为某个节点的起点，将Range对象的终点指定为该节点的终点，使Range对象所代表的区域中包含该节点。使用方法如下：

rangeObj.selectNode(node);

上面的rangeObj代表一个Range对象，该方法使用一个参数，代表页面中的一个节点。

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

rangeObj.selectNodeContents(node);

含义如上所示;

deleteContents方法：用于将Range对象中所包含的内容从页面中删除，使用方法如下所示：

rangeObj.deleteContents();

    <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: aquamarine; width: 300px;height: 50px">

        元素中内容

    </div>

    <button onclick="deleteRangeContent (false)">删除元素</button>

    <button onclick="deleteRangeContent (true)">删除内容</button>

   

setStart方法 用于将某个节点中的某处位置指定为Range对象所代表区域的起点位置，使用方法如下：

rangeObj.setStart(node,curIndex);

如上代码rangeObj代表一个Range对象，该setStart方法使用2个参数，第一个参数node代表一个节点，第二个参数是一个数字，当第一个参数node所代表的节点是一个内容为一段文字的文字节点时，该参数值用于指定将第几个文字的结束位置作为Range对象所代表的区域的起点位置；当第一个参数node所代表的节点中包括其他子节点时，该参数值用于将第几个子节点的结束位置指定为Range对象所代表的区域的起点位置；

setEnd方法  用于将某个节点中的某处位置指定Range对象所代表区域的结束位置。使用方法如下所示：

rangeObj.setEnd(node,curIndex);

该方法中的2个参数的含义如setStart方法中参数的含义相同；只不过一个是起点位置，另一个是结束位置；

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

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

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

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

   <script>

        function deleteChar() {

            var div=document.getElementById("mydiv");

            var textNode=div.firstChild;

            var rangeObj=document.createRange();

            rangeObj.setStart(textNode,1);

            rangeObj.setEnd(textNode,5);

            rangeObj.deleteContents();

        }

    </script>

    <div id="mydiv" style="color: cornflowerblue">

        12345测试删除文字功能aaaaaaaaa

    </div>

    <button onclick="deleteChar()">删除文字</button>
cloneRange
cloneRange方法  Range对象的cloneRange方法用于对当前的Range对象进行复制，该方法返回复制的Range对象，
    <script>

        function cloneRange() {

            var rangeObj=document.createRange();

            var p=document.getElementById("p");

            rangeObj.selectNodeContents(p)

            var rangeClone=rangeObj.cloneRange();

            alert(rangeClone.toString());

        }

    </script>

    <p id="p">这里是内容</p>

    <button onclick="cloneRange()">克隆</button>




cloneContents
 该方法用于在页面上追加一段HTML代码，并且将Range对象所代表区域中的HTML代码克隆到被追加的html代码中；




    <script>

        function cloneContent() {

            var div=document.getElementById("div1");

            var rangeObj=document.createRange();

            rangeObj.selectNodeContents(div);

            var docFrangMent=rangeObj.cloneContents();

            div.appendChild(docFrangMent);

        }

    </script>

    <div id="div1">

        *小萌货*

        <br/>

        <button onclick="cloneContent()">克隆</button>

        <br/>

    </div>






 


extractContents
extractContents方法 用于将Range对象所代表区域中的html代码克隆到一个DocumentFragment对象中，然后从页面中删除这段HTML代码；




    <script>

        function moveContent() {

            var srcDiv=document.getElementById("srcDiv");

            var disDiv=document.getElementById("disDiv");

            var rangeObj=document.createRange();

            rangeObj.selectNodeContents(srcDiv);

            var docFrangment=rangeObj.extractContents();

            disDiv.appendChild(docFrangment);

        }

    </script>

    <div id="srcDiv" style="background-color: cornflowerblue;width:300px;height: 50px">么么哒</div>

    <div id="disDiv" style="background-color: #ff6471;width:300px;height: 50px"></div>

    <button onclick="moveContent()">移动元素</button>






 


insertNode
insertNode方法： 该方法用于将指定的节点插入到某个Range对象所代表的区域中，插入位置为Range对象所代表区域的起点位置，如果该节点已经存在于页面中，该节点将被移动到Range对象代表的区域的起点处。




    <script>

        function moveButton() {

            var btn=document.getElementById("button");

            var selection=document.getSelection();

            if(selection.rangeCount>0){

                var range=selection.getRangeAt(0);

                range.insertNode(btn);

            }

        }

    </script>

    <div onmouseup="moveButton()" style="width: 400px;background-color: cornflowerblue">

        web前端 HTML5 hello world

    </div>

    <button id="button">按钮</button>








compareBoundaryPoints




    <script>

            function b() {

                var boldText=document.getElementById("boldTest");

                var boldRange=document.createRange();

                boldRange.selectNodeContents(boldText.firstChild);

                var selection=document.getSelection();

                if(selection.rangeCount>0) {

                    var selRange = selection.getRangeAt(0);

                    if (selRange.compareBoundaryPoints(Range.START_TO_END, boldRange) <= 0) {

                        alert("选取的文字在粗体前面");

                    } else {

                        if (selRange.compareBoundaryPoints(Range.END_TO_START, boldRange) >= 0)

                            alert("选取的文字在粗体的后面");

                    }

                }

            }

    </script>

    <div>

        下雨天了怎么办，<b id="boldTest">突然</b>好想你。

        <br/>

        <button onclick="b()">位置比较</button>

    </div>










collapse




    <script>

        var rangeObj=document.createRange();

        function selectRangeContens() {

            var div=document.getElementById("div");

            rangeObj.selectNode(div);

        }

        function  unselect() {

            rangeObj.collapse(false);

        }

        function showRange() {

            alert(rangeObj.toString());

        }

    </script>

    <div id="div2" style="background-color: cadetblue; width: 300px;height: 50px;">

        说好的幸福呢？

    </div>

    <button onclick="selectRangeContens()">选择元素</button>

    <button onclick=" unselect()">取消元素</button>

    <button onclick="showRange() ">显示Range内容</button>






选择元素后点击显示内容


取消元素后显示的情况


detach


range的detach方法如：rangeObj.detach()释放Range对象，释放后其他事件就不成立了，主要用于释放Range对象来提升应用的性能。


 


 


 


 


 


 
												


											
HTML5编辑API之Range对象的更多相关文章
	

    
								
  1. HTML5 编辑 API 之 Range 对象（一）
		
     一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE h ...
    
		
    2. 
						
  2. HTML5 编辑 API 之 Range 对象（二）
		
    1.Range.cloneContents()The Range.cloneContents() returns a DocumentFragment copying the objects of t ...
    
		
    3. 
						
  3. HTML5 页面编辑API之Range对象
		
    在 HTML5 中,一个 Range 对象代表页面上的一段连续区域.通过 Range 对象,可以获取或修改页面上的任何区域.包含获取,修改,删除和替换等操作. 一:获取range对象的值 Range对 ...
    
		
    4. 
						
  4. [html5] 学习笔记- 编辑API之Range对象（二）
		
    本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment ...
    
		
    5. 
						
  5. [html5] 学习笔记-编辑 API 之 Range 对象（一）
		
    1.Range对象的基本概念 一个Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改网页上的任何区域. <!DOCTYPE html> <html> & ...
    
		
    6. 
						
  6. html5学习笔记5--API Range对象(二)
		
    Range对象之cloneRange和cloneContents 代码效果如下 首次点击“选择内容“按钮提示如下 接着会显示 最后显示 以下为整个代码 <!DOCTYPE html> &l ...
    
		
    7. 
						
  7. html5学习笔记4--API Range对象(一)
		
    Range对象基本用法 效果图如下(在谷歌浏览器下的展示)
    
		
    8. 
						
  8. [H5]API之range对象
		
    range对象:是一种fragment(HTML片断),它包含了节点或文本节点的一部分.一般情况下,同一时刻页面中只可能 有一个range,也有可能是多个range(使用Ctrl健进行多选,不过有的浏 ...
    
		
    9. 
						
  9. web前端学习（二）html学习笔记部分（3）--range对象
		
    1.2.8  html5编辑api之range对象(一) 1.2.8.1  Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. java实训 ：异常（try-catch执行顺序与自定义异常）
			
    关键字: try:执行可能产生异常的代码 catch:捕获异常 finally:无论是否发生异常代码总能执行 throws:声明方法可能要抛出的各种异常 throw:手动抛出自定义异常 用 try-c ...
    
			
    2. 
						
  2. 有哪些值得学习的spring boot开源项目？
			
    1. awesome-spring-boot 首先给大家介绍的就是Spring Boot 中文索引,这是一个专门收集 Spring Boot 相关资料的开源项目,也有对应的导航页面. 产品主页 htt ...
    
			
    3. 
						
  3. nginx重写模块
			
    参考:http://nginx.org/en/docs/http/ngx_http_rewrite_module.html 1 语法 Syntax: if (condition) { ... } De ...
    
			
    4. 
						
  4. SAE上无法加载css等文件
			
    如果你的SAE用到了这些文件,你会发现本地虽然能够运行成功,但是SAE上却无法加载. 其实就是地址发生了变化,我们告诉SAE这些东西怎么找就可以了. 例如我的css和js文件放在了app/static ...
    
			
    5. 
						
  5. CF662 C. Binary Table
			
    题目传送门:CF 题目大意: 给定一个\(n\times m\)的表格\((n\leqslant 20,m\leqslant 10^5)\) 每个表格中有\(0/1\),每次可以将一行或者一列翻转,问 ...
    
			
    6. 
						
  6. 155 Min Stack 最小栈
			
    设计一个支持 push,pop,top 操作,并能在常量时间内检索最小元素的栈.    push(x) -- 将元素x推入栈中.    pop() -- 删除栈顶的元素.    top() -- 获取 ...
    
			
    7. 
						
  7. c8051单片机注意事项：
			
    一定要注意交叉开关问题:外设要想正确分配到指定引脚,一定要用配置工具确定分配到指定引脚:如果手动分配一定要仔细验证.这方面有个深刻的教训. 有个项目用c8051f020,用到2个串口,硬件已经确定好了 ...
    
			
    8. 
						
  8. Backbone学习记录（1）
			
    去年买的<基于MVC的javascript Web富应用开发>,拖到现在还没看完,作者介绍了三个MVC框架,Spine ,backbone和javascriptMVC.1和2在国内的流行度 ...
    
			
    9. 
						
  9. 【前端】jQurey Plugin
			
    ; (function ($, window, document, undefined) { "use strict"; var defaults = { name: " ...
    
			
    10. 
						
  10. Android MVVM小结
			
    一.概念 关于MVC.MVP与MVVM的概念就不介绍了,总之一句话,MVVM概念出现比MVP早,MVP比MVC早,作为程序员就应该去学习最新的技术不是?详细的概念介绍移步这里吧,https://www ...
    
			
    11.