HTML5——Range对象（1）

最新推荐文章于 2025-07-01 23:34:32 发布

原创最新推荐文章于 2025-07-01 23:34:32 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

前端工程师学习笔记同时被 3 个专栏收录

85 篇文章

订阅专栏

html

26 篇文章

订阅专栏

web

20 篇文章

订阅专栏

本文深入探讨了Range对象在网页编辑中的作用，包括如何通过setStart、setEnd等方法选择和修改网页上的特定区域，以及如何利用selectNode、selectNodeContents等方法操作DOM节点。同时，介绍了如何删除文本内容或整个节点，并通过实例展示了具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Range对象

（1）selectNode、SelectNodeContents、deleteContents方法
setStart、setEND、setStartBefore、setStartAfter、setEndBefore、setENDAfter方法
（2）基本概念：一个Range对象代表页面上的一段连续区域。通过Range对象，可以获取或修改网页上的任何区域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>range对象</title>
    <script src="util.js"></script>
</head>
<body>
    Selection对象与Rage对象的使用
    <input type="button" value="点击我" onclick="rangeTest()">
    <div id="showRange"></div>
</body>
</html>

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

（3）selectNodeContents(div):
选取div中内容，以内容的开头和结尾为起点和终点的区域。
selectNode(div):
选取div这个节点，以div标签的开始标签为起点，终止标签为终点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>range2</title>
    <script src="util.js"></script>
</head>
<body>
    <div id="div" style="background-color:#e0a0b0;width:300px;height:50px">
        元素中的内容        
    </div>
    <button onclick="deleteRangeContent(true)">删除内容</button>
    <button onclick="deleteRangeContent(false)">删除元素</button>
</body>
</html>

function deleteRangeContent(onlyContent) {
    var div = document.getElementById("div");
    var rangeObj = document.createRange();
    if(onlyContent){
        rangeObj.selectNodeContents(div);
        rangeObj.deleteContents();
    }else{
        rangeObj.selectNode(div);
        rangeObj.deleteContents();
    }
}

（4）setStart与setEnd
setStart指定range对象中某一点为起点，
setEnd指定range对象中某一点为终点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>range3</title>
    <script src="util.js"></script>
</head>
<body>
    <div id="myDiv" style="color:red">这段文字是用来删除的</div>
    <button onclick="deleteChar()">删除文字</button>
</body>
</html>

function deleteChar() {
    var div = document.getElementById("myDiv");
    var textNode = div.firstChild;
    var rangeObj = document.createRange();
    rangeObj.setStart(textNode,1);
    rangeObj.setEnd(textNode,4);
    rangeObj.deleteContents();
}