`

Javascript标准DOM Range操作

 
阅读更多

2级DOM定义了一个createRange()方法，如果是按照DOM此标准的浏览器（IE并不是支持此标准的，但是IE里的属性或方法却远比标准中定义的多得多），它属于document对象，所以创建一个range对象要这样做：

var oRange = document.createRange();

如果你要检测你的浏览器是否支持此标准Range对象，可以用hasFeature()方法来检测：

var supportsDOMRanges = document.implementation.hasFeature("Range", "2.0");
if (supportsDOMRange) {
var oRange = document.createRange();
//range code here
}

 
Range对象进行简单的选择
最简单用Range进行选择，用selectNode()或者selectNodeContents()方法，这两个方法只有一个接收参数，一个DOM节点。

selectNode()方法选择全部节点，包括它的孩子，而selectNodeContents()选择的节点只是它的孩子。如

<p id="p1"><b>Hello</b> World</p>
<script>
var oRange1 = document.createRange();
var oRange2 = document.createRange();
var oP1 = document.getElementById("p1");
oRange1.selectNode(oP1);
oRange2.selectNodeContents(oP1);
</script>

 

oRange1和oRange2包含上面所说的两种方法

 

当你创建了一个Range对象时，Range实例就会有以下的属性：
startContainer — 返回range对象从何开始的节点对象（父节点的第一个节点）
startOffset — 返回Range开始的偏移量(offset)，如果startContainer是一个文本节点，注释节点，或者是CDATA节点，这个属性返回文本的偏移量，否则返回第一个节点的索引。
endCOntainer — 返回Range对象最后一个节点对象（父节点的最后一个节点）
endOffset — 返回Range结束时的偏移量(offset)特性与startOffset相同。
commonAncestorContainer — 返回第一个包含该Range对象的节点。

注：这些属性均为只读属性(read-only)，startOffset和endOffset将在下文中有较详细的解释。

下面这段代码将说明这些属性，请在Mozilla firefox里运行（支持此标准的浏览器——DOM2级，IE里将无效）：

<html>
 <head>
 <title>DOM Range Example</title>
 <script type="text/javascript">
 function useRanges() {
 var oRange1 = document.createRange();
 var oRange2 = document.createRange();
 var oP1 = document.getElementById("p1");
 oRange1.selectNode(oP1);
 oRange2.selectNodeContents(oP1);
 
 document.getElementById("txtStartContainer1").value 
    = oRange1.startContainer.tagName;
 document.getElementById("txtStartOffset1").value = 
    oRange1.startOffset;
 document.getElementById("txtEndContainer1").value = 
    oRange1.endContainer.tagName;
 document.getElementById("txtEndOffset1").value = 
    oRange1.endOffset;
 document.getElementById("txtCommonAncestor1").value = 
    oRange1.commonAncestorContainer.tagName;
 document.getElementById("txtStartContainer2").value = 
    oRange2.startContainer.tagName;
 document.getElementById("txtStartOffset2").value = 
    oRange2.startOffset;
 document.getElementById("txtEndContainer2").value = 
    oRange2.endContainer.tagName;
 document.getElementById("txtEndOffset2").value = 
    oRange2.endOffset;
 document.getElementById("txtCommonAncestor2").value = 
    oRange2.commonAncestorContainer.tagName;
 }
 </script>
 </head>
 <body><p id="p1"><b>Hello</b> World</p>
 <input type="button" value="Use Ranges" onclick="useRanges()" /> 
 <table border="0">
 <tr>
 <td>
 <fieldset>
 <legend>oRange1</legend>
 Start Container: 
    <input type="text" id="txtStartContainer1" /><br />
 Start Offset: 
    <input type="text" id="txtStartOffset1" /><br />
 End Container: 
    <input type="text" id="txtEndContainer1" /><br />
 End Offset: 
    <input type="text" id="txtEndOffset1" /><br />
 Common Ancestor: 
    <input type="text" id="txtCommonAncestor1" /><br /> 
 </fieldset>
 </td>
 <td>
 <fieldset>
 <legend>oRange2</legend>
 Start Container: 
    <input type="text" id="txtStartContainer2" /><br />
 Start Offset: 
    <input type="text" id="txtStartOffset2" /><br />
 End Container: 
    <input type="text" id="txtEndContainer2" /><br />
 End Offset: 
    <input type="text" id="txtEndOffset2" /><br />
 Common Ancestor: 
    <input type="text" id="txtCommonAncestor2" /><br />
 </fieldset>
 </td>
 </tr>
 </table>
 </body>
</html>

 

上面的代码将不作注释了，有什么问题，在评论中留言。

Range中还有一些其它的方法：
setStartBefore(node) — 设置Range的相对于node节点的起始位置
setStartAfter(node) — 同上
setEndBefore — 设置Range的相对于node节点的结束位置
setEndAfter — 同上

复杂的DOM Range

建立复杂的DOM range需要使用setStart()和setEnd()两个方法，这两个方法有两个参数：一个是一个节点(node)引用和一个偏移(offset)。
setStart方法节点的引用是startContainer，偏移则是startOffset；
setEnd()方法时，节点引用为endContainer，偏移就是endOffset。

使用这两个方法与selectNode()和selectNodeContents()方法相似。比如，下面的useRanges()函数的前一个示例，可以使用setStart()和setEnd():

function useRanges() {
 var oRange1 = document.createRange();
 var oRange2 = document.createRange();
 var oP1 = document.getElementById("p1");
 var iP1Index = -1;
 for (var i=0; i < oP1.parentNode.childNodes.length; i++) {
 if (oP1.parentNode.childNodes[i] == oP1) {
 iP1Index = i;
 break;
 }
 }
 
 oRange1.setStart(oP1.parentNode, iP1Index);
 oRange1.setEnd(oP1.parentNode, iP1Index + 1);
 oRange2.setStart(oP1, 0);
 oRange2.setEnd(oP1, oP1.childNodes.length);
 //textbox assignments here
}
 

注意这个选择节点时的代码(oRange1)，你必须指定oP1父节点里所有childNodes集合里的一个索引。

而选择内容时的代码(oRange2)，则不需要额外的考虑，

从刚才的例子来从这段HTML里(code <p id="p1"><b>Hello</b> World</p>)
选择从hello中的llo开始到从World中的Wo开始的Range，我们用setStart()和setEnd()，很容易就可以做到。

首先，我们必须用常规的DOM方法得到文本节点的引用还有就是容器p1的引用。
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;

说明：
文本Hello实际上是容器p1的孙子节点，所以我们可以用oP1.firstChild得到<b>元素，oP1.firstChild.firstChild也就是Hello文本节点的引用了，而World则就是容器p1的最后一个节点了。

下一步，建立range然后设置偏移(offset)：

var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);

 

说明：
对于setStart()，偏移(offset)为2，因为字母l在该文本节点中(即Hello中)的位置是2，(位置是从0开始计算的)，设置setEnd()方法中的偏移为3，原因同上，需要注意的是World前面有一个空格，空格也是占位置的。

 



注意：
(Mozilla DOM Range bug #135928)在 Mozilla低版本浏览器 执行此Range方法时，如果setStart()和setEnd()都指向同一个文本节点会出现异常

用DOM Range做一些操作
当创建一个Range对象时，在Range里的所有对象之上，已经创建了一个文档的fragment节点。在这之前，Range对象必须合格证你选择的这段Range是一个well-formed（格式良好）。

很明显的，在这里，并不是一个well-formed，上面说过了，当创建一个Range时，会自动产生一个fragment，在这里，framgment自动动态的添加一些元素，以保证Range的正确性：

<p><b>He</b><b>llo</b> World</p>

也就是自动加上了开始标签<b>，使得整个Range变为<b>llo</b> Wo，：

 


当此fragment创建后，你就可以用Range的一些方法来操作它了。

最简单的一个操作就是：deleteContents()方法，这个方法将删除Range选中的部分，在上面的操作之后进行deleteContents()，那么余下的HTML就为：

<p><b>He</b>rld</p>

之所以加上闭合标签</b>，上面也说了，也是Range为了确保它是well-formed。

extractContents() 方法类似于deleteContents()，但具体操作不同，extractContents()是将选中的Range从DOM树中移到一个 fragment中，并返回此fragment，复制下面这些代码然后在Mozilla Firefox里运行，看看结果你就明白了。——删除的<b>llo</b> Wo作为一个fragment被添加到body的末端。

<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
var oFragment = oRange.extractContents();
document.body.appendChild(oFragment);
</script>

 
cloneContents()方法可以克隆选中Range的fragment，比如：

<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
var oFragment = oRange.cloneContents();
document.body.appendChild(oFragment);
</script>

 
这个方法类似于extractContents()，但是不是删除，而是克隆

从Range中插入一些数据

前一节的几个方法解决了如何移除range中所选中的fragment。现在说明如何添加内容到Range中。
insertNode()方法可以插入一个节点到Range中。假如我想把以下的节点插如Range中，将如何操作呢？
<span style="color: red">Inserted text</span>

看下面的代码：

<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
var oSpan = document.createElement("span");
oSpan.style.color = "red";
oSpan.appendChild(document.createTextNode("Inserted text"));
 
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.insertNode(oSpan);
</script>
 


那么原来的HTML将会变成这样：
<p id="p1"><b>He<span style="color: red">Inserted text</span>llo</b> World</p>

surroundContents()的参数为一个node，它将这个node加入到Range，下面看这个示例。

<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
var oSpan = document.createElement("span");
oSpan.style.backgroundColor = "yellow";
 
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.surroundContents(oSpan);
</script>

 
在oRange选取的范围内有一个我们新生成的节点span，因此选取的Range的背景变成了黄色。

collapse()方法：

collapse()方法只有一个布尔型的参数，该参数为可选的，也就是说，可以有，也可以没有，默认为false。
true时折叠到Range边界的首部，为false时折叠到Range尾部。即

 

 

<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.collapse(true); 
</script>

 
如果你想知道该Range是否已经折叠，可以用collapsed属性来得到true或者false。看下面的例子。

<p id="p1">Paragraph 1</p><p id="p2">Paragraph 2</p>
<script>
var oP1 = document.getElementById("p1");
var oP2 = document.getElementById("p2");
var oRange = document.createRange();
oRange.setStartAfter(oP1);
oRange.setStartBefore(oP2);
alert(oRange.collapsed); //outputs "true"
</script>

 

上面的代码输为true。虽然我们没有用collapse方法，但是由于我们的Range设置开始为1末端到p2的首端，没有任何元素。即</p>(Range开始)(Range结束)<p id="p2">，所以显示的是true。

Range边界的比较

compareBoundaryPoints()方法，语法形式如下：
compare = comparerange.compareBoundaryPoints(how,sourceRange)

参数含义：
compare —— 返回1, 0, -1.（0为相等，1为时，comparerange在sourceRange之后，-1为comparerange在sourceRange之前）
how —— 为Range常数：END_TO_END|END_TO_START|START_TO_END|START_TO_START
sourceRange —— 一个Range对象的边界。

看下面的例子：

<p id="p1"><b>Hello</b> World</p>
<script>
var oRange1 = document.createRange();
var oRange2 = document.createRange();
var oP1 = document.getElementById("p1");
oRange1.selectNodeContents(oP1);
oRange2.selectNodeContents(oP1);
oRange2.setEndBefore(oP1.lastChild);
alert(oRange1.compareBoundaryPoints(Range.START_TO_START, oRange2)); 
//outputs 0
alert(oRange1.compareBoundaryPoints(Range.END_TO_END, oRange2)); 
//outputs 1;
</script>

 

克隆(clone)Range

这个操作很简单，只需要一句语句即可：

var oNewRange = oRange.cloneRange();


cloneRange()方法将返回一个当前Range的副本，当然，它也是Range对象。

清除Range所占的系统资源

当你创建了Range对象最好用detach()方法来清除它所占的系统资源。虽然不清除，GC（垃圾收集器）也会将其收集，但用detach()释放是一个好习惯。语法为：

oRange.detach();


下面一个示例在Mozilla中，利用Range可以模拟出IE中的element.insertAdjacentHTML()方法，

if (browser.isMozilla) {
 HTMLElement.prototype.insertAdjacentHTML = function (sWhere, sHTML) {
 var df; var r = this.ownerDocument.createRange();
 switch (String(sWhere).toLowerCase()) {
 case "beforebegin":
 r.setStartBefore(this);
 df = r.createContextualFragment(sHTML);
 this.parentNode.insertBefore(df, this);
 break;
 case "afterbegin":
 r.selectNodeContents(this);
 r.collapse(true);
 df = r.createContextualFragment(sHTML);
 this.insertBefore(df, this.firstChild);
 break;
 case "beforeend":
 r.selectNodeContents(this);
 r.collapse(false);
 df = r.createContextualFragment(sHTML);
 this.appendChild(df);
 break;
 case "afterend":
 r.setStartAfter(this);
 df = r.createContextualFragment(sHTML);
 this.parentNode.insertBefore(df, this.nextSibling);
 break;
 }
 };
}
 
==========================

一：Range对象的概念

 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对象；

如下代码测试：

<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下效果：

在chrome浏览器下如下所示：

二：Range对象的属性和方法

属性如下：

collapsed(boolean) :  用于判断Range对象所代表的区域的开始点与结束点是否处于相同的位置，如果相同该属性值返回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对象，该方法使用一个参数，代表页面中的一个节点。

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

rangeObj.selectNodeContents(node);

含义如上所示;

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

rangeObj.deleteContents();

我们下面来做一个demo，来理解下上面的三个方法；如下代码：

<div id="div" style="background-color:#e0a0b0;width:300px;height:50px;">元素中的内容</div>
<button onclick="deleteRangeContents(true)">删除内容</button>
<button onclick="deleteRangeContents(false)">删除元素</button>

页面上显示如下：

JS代码如下：

<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对象的值是多少，

当点击删除内容的时候，就把相应的内容删掉；如下所示：

代码执行到下面的，rangeObj对象的值变成如下：

当我们点击删除元素的按钮时候，如下所示：

此时rangeObj对象变成如下：

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

rangeObj.setStart(node,curIndex);

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

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

rangeObj.setEnd(node,curIndex);

该方法中的2个参数的含义如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>

当我们点击删除文字按钮的时候，第3个到第10个文字被删除掉~

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>

如下图所示：

cloneContents方法  该方法用于在页面上追加一段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对象的属性如下：

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

该方法使用方式如下：

var  documentFragment = rangeObj.extractContents();

该方法返回一个包含了Range对象所代表区域中的HTML代码的DocumentFragment对象。

如下代码所示：

<div id="srcDiv" style="width:300px;height:50px;background-color:red;">demo</div>
<div id="destDiv" style="width:300px;height:50px;background:blue;">demo2</div>
<button onclick = "moveContent()">移动元素内容</button>

JS代码如下：

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

原页面如下：

点击按钮后变成如下：

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

rangeObj.insertNode(node);

如下demo：

代码如下：

<div onmouseup="MoveButton()" style="width:400px;height:100px;background-color:red">aaaaaaaaabbbbbb</div>
<button id="button">按钮</button>

JS代码如下：

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

页面初始化的时候如下：

当在相应的地方按下键的时候，变成如下：

 

分享到：
| JS中的双向数据绑定及Object.definePropert ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Javascript标准DOM_Range操作 - 百度文库.doc

    Javascript标准DOM_Range操作 - 百度文库.doc

    Javascript标准DOM Range操作全集第1/3页

    JavaScript中的DOM Range是用于在文档中创建和操作文本选择或范围的一个强大工具。在DOM2级规范中，Range对象提供了一系列方法和属性，允许开发者精确地控制文本的选择，包括选取文档中的特定部分、合并和拆分文本...

    javascript DOM 编程艺术源码

    JavaScript DOM编程艺术是一本深入探讨如何使用JavaScript操作和操纵网页文档对象模型（Document Object Model）的经典书籍。DOM是HTML和XML文档的一种结构化表示，它允许我们通过编程方式访问和修改网页内容。这...

    JavaScript.DOM编程艺术(第2版)加附录及源码.rar

    《JavaScript.DOM编程艺术(第2版)》是深入学习JavaScript与DOM操作的重要参考资料，它涵盖了JavaScript在网页开发中的核心概念和实践技巧。DOM（Document Object Model）是HTML和XML文档的结构化表示，通过...

    JavaScriptDOM高级程序设计

    此外，DOM还提供了许多其他高级特性，如DOM遍历和范围（Traversal and Range）、DOM2级样式（CSS样式操作）、以及DOM3级事件。DOM遍历API（如`NodeIterator`和`TreeWalker`）帮助我们更有效地搜索和处理DOM树。DOM3...

    range-normalize:跨浏览器标准化DOM Range起始和结束容器

    总结来说，"range-normalize"是一个解决JavaScript中DOM Range跨浏览器兼容问题的工具，它通过对Range对象进行标准化处理，确保在所有支持的浏览器上都能得到一致的结果。通过简单地引入和调用库，开发者可以编写出...

    W3C DOM模型参考手册

    Gecko Range Interface Extensions是对DOM2 Range Interface的扩展，提供了更多的方法来增强Range对象的功能。 #### 十一、DOM Examples 文档还包含了许多实用的例子，帮助开发者更好地理解和应用DOM。这些例子...

    daterangepicker中文示例

    同时，确保正确引用jQuery库，因为daterangepicker依赖jQuery来操作DOM和处理事件。 总之，daterangepicker是一款强大的日期选择工具，其易用性和灵活性使其成为许多Web应用的理想选择。通过深入理解和实践date...

    前段JS开发和DOM兼容问题大全

    在前端开发中，JavaScript和DOM操作是核心组成部分，而不同浏览器之间的兼容性问题常常困扰开发者。以下将详细介绍在处理JavaScript和DOM时遇到的兼容性问题以及相应的解决方法。 一、DOM节点的访问兼容性问题及...

    Javascript-DOM

    JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它是一种标准的编程接口，用于HTML和XML文档。DOM将网页结构表示为一棵由节点组成的树形结构，使得JavaScript能够动态地访问和修改页面内容。在...

    jquery range

    在 `jQuery Range` 插件中，jQuery 提供了基础的 DOM 操作和事件绑定功能，使得创建滑动选择器变得更加便捷。 2. **样式表（jquery.range.css）**：这个 CSS 文件负责定义滑动选择器的样式，包括滑块的外观、轨道的...

    javascript Range对象跨浏览器常用操作第1/2页

    在标准DOM中，Range对象遵循W3C规范，可以通过`window.getSelection().getRangeAt(0)`来获取。而在IE中，为了兼容老版本的浏览器，我们需要使用`document.selection.createRange()`来获取TextRange对象。这两个对象...

    Gecko DOM Reference

    - **DOM Range Reference**：针对文本范围处理提供了详细的接口说明，包括创建、编辑和其他方法。 #### 九、总结 Gecko DOM参考文档是一份非常全面且实用的资源，它不仅适合初学者学习DOM的基础知识，也非常适合...

    JavaScript使用Range调色及透明度实例

    2. JavaScript操作DOM元素：文章通过JavaScript对DOM元素进行操作，动态获取用户通过滑动条选择的颜色值，并通过`document.getElementsByTagName("input")`获取页面中所有的输入控件，然后遍历这些控件，为它们绑定...

    JavaScript Functional Programming for JavaScript Developers (PDF, EPUB, MOBI)

    The third module, Functional Programming in JavaScript, will help you to write real-world applications by utilizing a wide range of functional techniques and styles. It explores the core concepts of ...

    VB转javascript代码帮助下载

    例如，在JavaScript中可能需要使用DOM操作来实现VBA中对Word文档的操作。 #### 五、总结 从VB到JavaScript的代码转换涉及到多方面的考虑，包括但不限于语法差异、对象模型的不同以及库的支持等。通过细致地分析源...

    save-range:使用 DOM 标记保存 Range 的边界以供稍后加载

    在JavaScript编程中，Range对象是DOM（文档对象模型）的一部分，它允许我们操作文档中的文本或元素，定义一个从开始到结束的特定区域。Range对象提供了很多方法，如selectNode()、surroundContents()和cloneContents...

    bootstrap 时间插件 daterangepicker 4.0 添加清空按钮

    你可以通过在插件的DOM结构中添加一个新的按钮元素，并绑定一个清除事件来实现这一功能。例如，可以在日期选择面板的底部添加一个“清除”按钮，点击后调用daterangepicker的`setStartDate`和`setEndDate`方法，分别...

Magicbox
Global site tag (gtag.js) - Google Analytics