html5 编辑API之range对象（二）

来源：互联网发布：c语言可视化编程软件编辑：程序博客网时间：2024/06/05 03:52

cloneRange方法 Range对象的cloneRange方法用于对当前的Range对象进行复制，该方法返回复制的Range对象，该方法使用如下所示：

var rangeClone = rangeObj.cloneRange();

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <script>        function cloneRange(){            var rangeObj = document.createRange();            rangeObj.selectNodeContents(document.getElementById("p"));            var rangeClone = rangeObj.cloneRange();            alert(rangeClone.toString());        }    </script>    <p id="p">这是随便书写的内容</p>    <button onclick="cloneRange()">克隆</button></body></html>

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

使用方法如下所示：

var html = rangeObj.cloneContents();

该方法不使用任何参数，该方法返回一个DocumentFragment对象，该对象为一个容器元素，当需要追加，删除，修改或查找页面上的元素，该对象变得非常有用；

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <script>        function cloneContent(){            var p = document.getElementById("p");            var rangeObj = document.createRange();            rangeObj.selectNodeContents(p);            var doClone = rangeObj.cloneContents();            p.appendChild(doClone);        }    </script>    <div id="p">        <p>这是要被克隆的内容</p>    </div>    <button onclick="cloneContent()">克隆</button></body></html>

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

该方法使用方式如下：

var documentFragment = rangeObj.extractContents();

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

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <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>    <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></body></html>

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

rangeObj.insertNode(node);

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <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>       <div onmouseup="MoveButton()" style="width:400px;height:100px;background-color:red">aaaaaaaaabbbbbb</div>    <button id="button">按钮</button></body></html>

compareBoundaryPoints(how, sourceRange)方法

Range.START_TO_START - 比较两个 Range 节点的开始点
Range.END_TO_END - 比较两个 Range 节点的结束点
Range.STARTTO_END - 用 _sourceRange 的开始点与当前范围的结束点比较
Range.ENDTO_START - 用 _sourceRange 的结束点与当前范围的开始点比较

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <script>        function testPlace() {            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>    这是一段文字，我也不<b id="boldTest">知道</b>写写什么。随便吧。    <br>    <button onclick="testPlace()">位置比较</button></body></html>

collapse()方法是范围的边界点重合。
collapse(toStart)
参数toStart设置为true，该方法将把范围的结束点设置为与开始点相同的值。否则，它将把范围的开始的设置为与结束点相同的值。

detach方法，释放点Range对象。

1 0