web前端学习（二）html学习笔记部分（3）--range对象

1.2.8  html5编辑api之range对象（一）

1.2.8.1  Range 对象基本概念

　　Range 对象的基本概念，通过使用 Range 对象所提供的方法实现一个鼠标选取内容，通过点击按钮打印出选中内容，当然注意在不同的浏览器下可选中的内容数量是不同的。

<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;
        }
    }
    // chrome浏览器中只能选取一块内容，火狐浏览器中可以通过按command键
    // 选取多块选区。
</script>
select对象与Range对象的使用
<input type="button" value="点击我" onclick="rangeTest()">
<div id="showRange"></div>
<hr/>

1.2.8.2  Range方法之SelectNode等方法

　　Range 对象方法，包含 SelectNode、SelectNodeContents、deleteContents 方法，通过实例来了解每一个方法的使用。

<script>
    function deleteRangeContent(onlyContent){
        var div = document.getElementById("divTest");
        var rangeObj = document.createRange();
        if(onlyContent){
            rangeObj.selectNodeContents(div);
            //直选中节点内的内容；
            rangeObj.deleteContents();
            //删除选中的内容；
        }else{
            rangeObj.selectNode(div);
            //选中整个节点
            rangeObj.deleteContents();
        }
    }
</script>
<div id="divTest" style="  200px; height: 100px;">元素中的内容</div>
<button  onclick="deleteRangeContent(true)" >删除内容</button>
<button  onclick="deleteRangeContent(false)" >删除元素</button>
<!--button标签没有value属性，使用了不管用，input类型为button之后才有value属性-->

1.2.8.3  Range方法之setStartsetEnd等方法

　　Range 对象方法，包含 setStart、setEnd、setStartBefore、setStartAfter、setEndBefore、setEndAfter 方法。

<script>
    function  deleteChar(){
        var div = document.getElementById("myDiv");
        // var textNode = div.firstChild;
        var textNode = div.firstChild;
        //firstChild返回的是一个节点，内容是一段字符
        var rangeObj = document.createRange();
        rangeObj.setStart(textNode,1);
        //数字1是偏移量
        rangeObj.setEnd(textNode,2);
        rangeObj.deleteContents();

    }
</script>
<div id="myDiv"style="color:red">这段文字是用来测试删除的
</div>
<!--setStart会识别初div中的空格，卧槽。。。半个小时搞这个。。。醉了
而且节点是从0开始的，一个汉字就是一个节点-->
<button onclick="deleteChar()">删除文字</button>

<script>
    function deleteRow() {
        var table = document.getElementById("myTable");
        if(table.rows.length > 0){
            var row = table.rows[0];
            var rangeObj = document.createRange();
            rangeObj.setStartBefore(row);
            rangeObj.setEndAfter(row);
            //顾名思义看英语
            rangeObj.deleteContents();
        }
    }
</script>
<table id="myTable" border="5px" cellpadding="0" cellspacing="10">
    <!--cellpadding:表格内部文字与单个表格边框的距离
    cellspacing：table的边界内部与内容的距离-->
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
    <tr>
        <td>内容3</td>
        <td>内容4</td>
    </tr>
</table>
<button onclick="deleteRow()">删除第一行</button>

 1.2.9  HTML5 编辑 API 之 Range 对象（二）

1.2.9.1  Range 对象方法

　　通过使用 Range 对象的方法来进行复制、追加、克隆等操作。通过简单地标签，来了解 Range 对象提供的方法的使用。

克隆range对象

<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 onclick="cloneRange()">克隆</button>

克隆内容

<script>
        function cloneContent(){
            var div = document.getElementById("div");
            var rangeObj = document.createRange();
            rangeObj.selectNodeContents(div);
            var docFrangment = rangeObj.cloneContents();
            div.appendChild(docFrangment);
        }
    </script>
    <div id="div">这是随便书写的一段内容
        <br/>
        <button onclick="cloneContent()">克隆</button>
        <br/>
    </div>

移动内容

<script>
    function moveContent(){
        var srcDiv = document.getElementById("srcDiv");
        var disDiv = document.getElementById("disDiv");
        var rangeObj = document.createRange();
        rangeObj.selectNodeContents(srcDiv);
        var docFragment = rangeObj.extractContents();
        disDiv.appendChild(docFragment);
    //    将srcDiv中的元素移动到disDiv中；
    }
</script>
    <div id="srcDiv" style="300px;height:20px;">你好吗？</div>
    <div id="disDiv" style="300px;height:20px;"></div>
<button onclick="moveContent()">移动</button>

1.2.9.2  Range 对象方法之 insertNode、compareBoundaryPoints 方法

　　通过使用 Range 对象的方法 insertNode 来进行指定节点插入某个 Range 对象所代表的区域中插入位置为 Range 对象所代表的区域的起点位置。使用 compareBoundaryPoints 方法来比较两个 Range 对象的起点位置或终点位置。

<script>
    function moveButton(){
        var btn = document.getElementById("button");
        var selection = document.getSelection();
        if(selection.rangeCount > 0){
            // alert(selection.rangeCount);
            var range = selection.getRangeAt(1);
            //必须选中两块才会显示第1这个，初始是0；
            range.insertNode(btn);
        }
    }
</script>
<div onmouseup="moveButton()" style="400px;">这里是我随便书写的一段文字这里是我随便书写的一段文字这里是我随便书写的一段文字
</div>
<button id="button">插入按钮</button>

1.2.9.3  Range 对象方法之 collapse、detach 方法

　　Range 对象方法之 collapse 和 detach。通过使用 collapse 方法将 Range 对象所代表的区域的终点移动到该区域的起点处，或将 Range 对象所代表区域的起点移动到终点出。

<script>
    var rangeObj = document.createRange();
    function selectRangeContents(){
        var div = document.getElementById("div");
        rangeObj.selectNode(div);
        // rangeObj.detach();
        // 将range对象释放掉
    }
    function unselect(){
        rangeObj.collapse(false);
    //    Range.collapse() 方法向边界点折叠该 Range 。
    // 折叠后的 Range 为空，不包含节点内容。
    // specifying a single-point in a DOM tree.
    // 要确定 Range 是否已折叠，使用Range.collapsed 属性。
    }
    function showRange(){
        alert(rangeObj.toString());
    }
</script>
    <div id="div" style="300px;height:20px;">元素中的内容！</div>
    <button onclick="selectRangeContents()">选择元素</button>
    <button onclick="unselect()">取消元素</button>
    <button onclick="showRange()">显示range内容</button>