html5 编辑API之range对象(二)


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



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

俊刚、

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值