>

HTML5中的Range对象的研究

- 编辑:www.bifa688.com -

HTML5中的Range对象的研究

range对象的extractContents()方法:

[H5]range对象的createRange方法,h5createrange

range对象的extractContents()方法:

extractContents() 方法删除文书档案内容,并以 DocumentFragment 对象的样式再次回到它;

DocumentFragment协作range对象:相当于剪切、复制、粘贴其子孙节点

<body>
    <div id="div1" style="background: greenyellow;width: 200px; height:100px;">这里有一段文字</div>
    <div id="div2" style="background: #faed98;width: 200px; height:100px;"></div>
    <button onclick="btn()">转移</button>
    <script>
        function btn() {
            var div1=document.getElementById("div1");
            var div2=document.getElementById("div2");
            var rangeObj=document.createRange();
            rangeObj.selectNodeContents(div1);
            docFragment=rangeObj.extractContents();
            div2.appendChild(docFragment);
        }
    </script>
</body>

 

range对象的extractContents()方法: extractContents() 方法删除文档内容,并以 DocumentFragment 对象的款式重临它...

HTML5中的Range对象的商量(转载),html伍range

壹:Range对象的定义

 Range对象表示页面上的一段连接区域,通过Range对象,能够获取或修改页面上的别样区域,能够透过如下创造1个空的Range对象,如下:

      var  range = document.createRange();

在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选择的区域,(专注:经过测试IE玖以下的浏览器不支持Selection对象), 能够透过如下语句创立selection对象;

   var  selection = document.getSelection();     或者

   必发88官网,var  selection  = window.getSelection();

每2个selection对象都有二个大概多个Range对象,每3个range对象表示用户鼠标所选拔范围内的1段连接区域,在firefox中,可以透过 ctrl键能够挑选多个一而再的区域,因而在firefox中八个selection对象有多个range对象,在其余浏览器中,用户只好选择一段连接的区 域,由此只有2个range对象。

能够经过selection对象的getRangeAt方法来取得selection对象的有些Range对象,如下:

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

getRangeAt方法有二个参数index,代表该Range对象的系列号;大家得以由此Selection对象的rangeCount参数的值判别用户是或不是选取了内容;

一般来说代码测试:

<h3>selection对象与range对象的使用实例</h3>
 <input type="button" value="点击我" onclick="rangeTest()"/>
 <div id="showRange"></div>

JS代码如下:

<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>

如上代码,当用户挑选一段文字后,点击按键,会议及展览示选择的文字,如下在firefox下效果:

必发88官网 1

在chrome浏览器下如下所示:

必发88官网 2

二:Range对象的性质和章程

属性如下:

collapsed(boolean) :  用于判断Range对象所表示的区域的上马点与截至点是不是处在同1的义务,假若一样该属性值重临true;

commonAncestorContainer(node):  用于重返Range对象所表示的区域位于什么节点之中,该属性值为含有了该区域的最低层节点(一个节点或然是一个成分,也说不定是一段完整文字)的节点。

endContainer(node):  用于再次回到Range对象所表示的区域的顶点位于什么节点之中,该属性值为涵盖了该区域终点的最尾巴部分节点。

endOffset(整数值类型):用于再次来到Range对象所表示的区域的终端与分包该终端的节点的起源之间的偏离。

startContainer(node):   用于再次来到Range对象所代表的区域的起点位于什么节点之中,该属性值为含有了该区域起源的最底部节点。

startOffset(整数值类型):用于再次回到Range对象所代表的区域的源点与分包该源点的节点的起源之间的离开。

下边还有众多措施,方法的意义比较难知晓,作者那边也是看看书上这么写的,顺便自身做了demo试了下,精晓下其含义。以往须要使用到的能够看一下就能够;

selectNode方法:Range对象的selectNode方法用于将Range对象的源点钦赐为某些节点的起源,将Range对象的顶点钦赐为该节点的顶峰,使Range对象所表示的区域中含有该节点。使用方式如下:

rangeObj.selectNode(node);

地点的rangeObj代表二个Range对象,该措施应用一个参数,代表页面中的3个节点。

selectNodeContents方法:用于将Range对象的源点内定为有些节点中的全数内容的起源,将Range对象的终点钦命为该节点有所内容的终端,使Range对象所代表的区域中涵盖该节点的具备故事情节。使用办法如下:

rangeObj.selectNodeContents(node);

意义如上所示;

deleteContents方法:用于将Range对象中所包蕴的剧情从页面中删去,使用办法如下所示:

rangeObj.deleteContents();

大家上面来做2个demo,来了然下上边包车型大巴四个格局;如下代码:

<div id="div"><script>
    function deleteRangeContents(flag) {
        var div = document.getElementById("div");
        var rangeObj = document.createRange();
        if(flag) {
                         // selectNodeContents指选中Range对象中的所有内容  进行删除掉
            rangeObj.selectNodeContents(div);
            rangeObj.deleteContents();
        }else {
            rangeObj.selectNode(div);
            rangeObj.deleteContents();
        }
    }
</script>

当代码推行完document.createRange();时候,我们看看rangeObj对象的值是稍微,

必发88官网 3

当点击删除内容的时候,就把相应的内容删掉;如下所示:

必发88官网 4

代码实践到上边包车型地铁,rangeObj对象的值产生如下:

必发88官网 5

当大家点击删除成分的按键时候,如下所示:

必发88官网 6

那会儿rangeObj对象变成如下:

必发88官网 7

setStart方法 用以将有些节点中的某处地点内定为Range对象所代表区域的起源位置,使用办法如下:

rangeObj.setStart(node,curIndex);

如上代码 rangeObj代表多个Range对象,该setStart方法运用一个参数,第二个参数node代表三个节点,第二个参数是三个数字,当第二个参数 node所代表的节点是八个剧情为1段文字的文字节点时,该参数值用于内定将第多少个文字的了断地方作为Range对象所代表的区域的起源地点;当第3个参 数node所代表的节点中总结其余子节点时,该参数值用于将第多少个子节点的完毕地点钦点为Range对象所表示的区域的起源地方;

setEnd方法  用于将某些节点中的某处地方钦定Range对象所表示区域的停止地方。使用办法如下所示:

rangeObj.setEnd(node,curIndex);

该措施中的一个参数的含义如setStart方法中参数的含义一样;只但是一个是源点地点,另二个是得了地点;

作者们来看一个demo,来明白下上边的2个点子的意思;代码如下:

<div id="myDiv">这段文字中第三个文字到第十个文字将被删除掉</div>
 <button onclick="DeleteChar()">删除文字</button>

JS代码如下:

<script>
    function DeleteChar(){
        var myDiv = document.getElementById("myDiv");
        var textNode = myDiv.firstChild;
        var rangeObj = document.createRange();
        rangeObj.setStart(textNode,2);
        rangeObj.setEnd(textNode,10);
        rangeObj.deleteContents();
    }
</script>

当大家点击删除文字按键的时候,第二个到第八个文字被剔除掉~

setStartBefore方法:用以将有个别节点的起源地方钦点为Range对象所表示区域的源点地方。

setStartAfter方法: 用于将有个别节点的巅峰地点内定为Range对象所表示区域的源点地点。

setEndBefore方法: 用于将有个别节点的源点地方内定为Range对象所表示区域的终极位置。

setEndAfter方法:  用来将有些节点的巅峰地方钦赐为Range对象所代表区域的顶点地方。

应用格局如下所示:

rangeObj.setStartBefore(node);

rangeObj.setStartAfter(node);

rangeObj.setEndBefore(node);

rangeObj.setEndAfter(node);

大家依旧先来做一个demo,来通晓下上面包车型大巴三个办法;如下所示:

<table id="myTable" border = "1" cellspacing="0" cellpadding="0">
     <tr>
         <td>第一行第一列</td>
         <td>第一行第二列</td>
     </tr>
     <tr>
         <td>第二行第一列</td>
         <td>第二行第二列</td>
     </tr>
 </table>
 <button onclick="deleteFirstRow()">删除第一行</button>

JS代码如下所示:

<script>
     function deleteFirstRow(){
         var myTable = document.getElementById("myTable");
         if(myTable.rows.length > 0){
             var row = myTable.rows[0];
             var rangeObj = document.createRange();
             rangeObj.setStartBefore(row);
             rangeObj.setEndAfter(row);
             rangeObj.deleteContents();
         }
     }
 </script>

如上代码所示;用户单击 删除第叁行按键时候,表格的第一行将会被删去掉;

cloneRange方法  Range对象的cloneRange方法用于对当下的Range对象开始展览复制,该格局重临复制的Range对象,该方法应用如下所示:

var rangeClone = rangeObj.cloneRange();

咱俩得以先来看看一个demo列子,如下所示:

<div id="test">aaaa</div>
<button onclick="cloneARange()">克隆Range对象</button> 

JS代码如下:

<script>
     function cloneARange() {
         var testObj = document.getElementById("test");
         var rangeObj = document.createRange();
         rangeObj.selectNodeContents(testObj);
         var rangeClone = rangeObj.cloneRange();
         alert(rangeClone);
     }
 </script>

一般来讲图所示:

必发88官网 8

cloneContents方法  该办法用于在页面上平添1段HTML代码,并且将Range对象所代表区域中的HTML代码克隆到被追加的html代码中;

动用方法如下所示:

var  html = rangeObj.cloneContents();

该办法不行使此外参数,该措施重返多少个DocumentFragment对象,该指标为三个容器成分,当要求扩充,删除,修改或查究页面上的因素,该指标变得要命实用;

一般来讲代码所示:

<div id="div">     实例文字     <br/>
    <button onclick="cloneDivContent()">克隆</button>
</div>

JS代码如下:

<script>
     function cloneDivContent() {
         var div = document.getElementById("div");
         var rangeObj = document.createRange();
         rangeObj.selectNodeContents(div);
         var documentFragment = rangeObj.cloneContents();
         div.appendChild(documentFragment);
     }
 </script>

如上代码,用户单击页面上的仿造按键后,将会把div成分中的内容克隆到div成分尾部;大家再来看看documentFragment对象的质量如下:

必发88官网 9

extractContents方法 用来将Range对象所表示区域中的html代码克隆到一个DocumentFragment对象中,然后从页面中删去那段HTML代码;

该措施应用方法如下:

var  documentFragment = rangeObj.extractContents();

该方法重临一个包括了Range对象所代表区域中的HTML代码的DocumentFragment对象。

正如代码所示:

<div id="srcDiv"><script>
     function moveContent() {
         var srcDiv = document.getElementById("srcDiv");
         var destDiv = document.getElementById("destDiv");
         var rangeObj = document.createRange();
         rangeObj.selectNodeContents(srcDiv);
         var documentFragment = rangeObj.extractContents();
         destDiv.appendChild(documentFragment);
     }
 </script>

原页面如下:

必发88官网 10

点击按键后改成如下:

必发88官网 11

insertNode方法: 该格局用于将钦点的节点插入到某些Range对象所表示的区域中,插入地点为Range对象所代表区域的源点地方,若是该节点已经存在于页面中,该节点将被移位到Range对象表示的区域的起源处。使用方法如下:

rangeObj.insertNode(node);

如下demo:

代码如下:

<div onmouseup="MoveButton()"><script>
    function MoveButton() {
        var button = document.getElementById("button");
        var selection = document.getSelection();
        if(selection.rangeCount > 0) {
            var range = selection.getRangeAt(0);
            range.insertNode(button);
        }
    }
</script>

页面开首化的时候如下:

必发88官网 12

当在相应的地点按下键的时候,变成如下:

必发88官网 13

原版的书文地址:

连带内容:

JS Range HTML文书档案/文字内容选中、库及运用介绍:

壹:Range对象的定义 Range对象表示页面上的一段连接区域,通过Range对象,能够获得或修改页面上...

extractContents() 方法删除文书档案内容,并以 DocumentFragment 对象的情势重回它;

DocumentFragment协作range对象:相当于剪切、复制、粘贴其子孙节点

<body>
    <div id="div1" style="background: greenyellow;width: 200px; height:100px;">这里有一段文字</div>
    <div id="div2" style="background: #faed98;width: 200px; height:100px;"></div>
    <button onclick="btn()">转移</button>
    <script>
        function btn() {
            var div1=document.getElementById("div1");
            var div2=document.getElementById("div2");
            var rangeObj=document.createRange();
            rangeObj.selectNodeContents(div1);
            docFragment=rangeObj.extractContents();
            div2.appendChild(docFragment);
        }
    </script>
</body>

 

本文由必发88官网发布,转载请注明来源:HTML5中的Range对象的研究