安安123

HTML5的Rang对象

基本概念

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>

posted on 2017-07-12 21:02  安安123  阅读(258)  评论(0)  编辑  收藏  举报

导航