基本概念

Range对象代表页面上的一段连续的区域。通过Range对象，可以获取或修改网页上的任何区域。

Selection与Range对象的使用

<body>

    <script>

        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;

            }

        }

    </script>

    Selection与Range对象的使用

    <input type="button" value="点击" onclick="rangeTest()">

    <div id="showRange"></div>

</body>

selectNodeContents和selectNode

<body>

    <script>

        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();

            }

        }

    </script>

    <div id="div" style="background-color: blueviolet;width: 300px;height: 50px">

        这里是div元素的内容

    </div>

    <button onclick="deleteRangeContent(true)">删除内容</button>

    <button onclick="deleteRangeContent(false)">删除元素</button>

</body>