html5 编辑API之range对象（二）

最新推荐文章于 2024-07-08 16:22:22 发布

俊刚、

最新推荐文章于 2024-07-08 16:22:22 发布

阅读量1.4k

点赞数 1

分类专栏： 2020以前文章标签： html5 range对象

本文链接：https://blog.csdn.net/csdn9_14/article/details/53148177

版权

2020以前专栏收录该内容

50 篇文章 0 订阅

订阅专栏

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 οnclick="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 οnclick="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 οnmοuseup="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 οnclick="testPlace()">位置比较</button>
</body>
</html>

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

detach方法，释放点Range对象。