html学习笔记（8）

最新推荐文章于 2023-01-12 15:14:08 发布

thystar

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量446

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/thystar/article/details/47446897

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

HTML编辑API 之Range对象：

Range对象方法

cloneRange, 复制当前range

<!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">ssssssssssssssssssssss</p>
<button οnclick="cloneRange()">克隆</button>
</body>
</html>

cloneContents, 追加html代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function cloneContent(){
        var div = document.getElementById("div")
        var rangeObj = document.createRange();
        rangeObj.selectNodeContents(div);
        var docFr = rangeObj.cloneContents();
        div.appendChild(docFr);
    }
</script>
<div id="div">ssssssssssss
    你好吗
    <br/>
    <button οnclick="cloneContent()">克隆</button>
    <br/>
</div>
</body>
</html>

extractContents方法：将一个range中的内容移动到另一个range中；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function moveC(){
        var srcDiv = document.getElementById("srcDiv");
        var ditDiv = document.getElementById("ditDiv");
        var rangeObj = document.createRange();
        rangeObj.selectNodeContents(srcDiv);
        var docFr = rangeObj.extractContents();
        ditDiv.appendChild(docFr);
    }
</script>
<div id="srcDiv" style="background-color: aqua; width: 300px; height: 50px">ssssss</div>
<div id="ditDiv" style="background-color: red; width: 300px; height: 50px">dddddd</div>
<button οnclick="moveC()">移除</button>
</body>
</html>

insertNode :指定节点插入到range对象的某个位置中。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function moveButton(){
        var btn = document.getElementById("button");
        var seletion = document.getSelection();
        if(seletion.rangeCount > 0){
            var range = seletion.getRangeAt(0);
            range.insertNode(btn)
        }
    }
</script>
<div οnmοuseup="moveButton()" style="width: 400px; background-color: aqua">
    sssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
<button id="button">按钮</button>
</body>
</html>

compareBoundPoints：比较两个对象的起点位置或终点位置：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function test(){
        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.START_TO_START, boldRange)>=0){
                    alert("选取的文字在粗体后面");
                }
            }
        }
    }
</script>
sssssssssssssssssssssssssssssss<b id="boldTest">bbbbb</b>ssssssssssssssssssssssssss
<br/>
<button οnclick="test()">位置比较</button>
</body>
</html>

collapse, range对象所代表的该区域的终点移动到该区域的起点处，或相反：

detach方法：释放range对象；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var rangeObj = document.createRange();
    function selectRC(){
        var div = document.getElementById("div");
        rangeObj.selectNode(div);
        //rangeObj.detach();
    }
    function unselect(){
        rangeObj.collapse(false);
    }
    function showRange(){
        alert(rangeObj.toString());
    }

</script>
<div id="div" style="background-color: aqua; width: 300px; height: 50px">
    ssssssssssssssssssssssss
</div>
<button οnclick="selectRC()">选择元素</button>
<button οnclick="unselect()">取消元素</button>
<button οnclick="showRange()">显示range的内容</button>

</body>
</html>

thystar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html学习笔记（8）

HTML编辑API 之Range对象：Range对象方法cloneRange, 复制当前range function cloneRange(){ var rangeObj = document.createRange(); rangeObj.selectNodeContents(document.getEle
复制链接

扫一扫

专栏目录