HTML5学习笔记9-编辑API之Range对象（二）

1、cloneRange、cloneContents、extractContents方法

    <p id="pid">这里随意书写</p>
    <button οnclick="cloneRange()">克隆</button>
    <script>
        function cloneRange(){
            var p=document.getElementById("pid");
            var rangeObj=document.createRange();
            rangeObj.selectNodeContents(p);
            alert(rangeObj.toString());
        }
    </script>

    <script>
        function cloneContent(){
            var div=document.getElementById("mydiv");
            var rangeObj=document.createRange();
            rangeObj.selectNodeContents(div);
            var docRangeMent=rangeObj.cloneContents();
            div.appendChild(docRangeMent);
        }
    </script>
    <div id="mydiv">
        Hello?
        <br>
        <button οnclick="cloneContent()">克隆</button>
        <br>
    </div>

    <div id="srcdiv" style="background-color: darkred;width: 300px;height: 50px">I'm here.</div>
    <div id="distdiv" style="background-color: bisque;width: 300px;height: 50px"></div>
    <button οnclick="moveContent()">移动元素</button>
    <script>
        function moveContent(){
            var srcdiv=document.getElementById("srcdiv");
            var distdiv=document.getElementById("distdiv");
            var rangeObj=document.createRange();
            rangeObj.selectNodeContents(srcdiv);
            var docRangement=rangeObj.extractContents();
            distdiv.appendChild(docRangement);
        }
    </script>

2、insertNode、compareBoundaryPoints方法

    <div οnmοuseup="moveButton()" style="background-color: bisque;width: 400px">
        随意书写的内容随意书写的内容随意书写的内容
    </div>
    <button id="button">按钮</button>
    <script>
        function moveButton(){
           var btn=document.getElementById("button");
            var selection=document.getSelection();
            if(selection.rangeCount>0){
                var range=selection.getRangeAt(0);
                range.insertNode(btn);
            }
        }
    </script>

    随意文字随意文字<b id="bid">随意</b>文字随意文字随意文字<br>
    <button οnclick="comparePos()">位置比较</button>
    <script>
        function comparePos(){
            var boldtext=document.getElementById("bid");
            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.END_TO_START,boldRange)>=0){
                        alert("你选择了粗体后的文字");
                    }
                }
            }
        }
    </script>

3、collapse、detach方法

    <div id="div" style="background-color: bisque;width: 300px;height: 50px">
        随意文字随意文字随意文字随意文字
    </div>
    <button οnclick="selectRangeContents()">选择元素</button>
    <button οnclick="unSelect()">取消元素</button>
    <button οnclick="showRange()">显示Range内容</button>
    <script>
        var rangeObj=document.createRange();
        function selectRangeContents(){
            var div=document.getElementById("div");
            rangeObj.selectNode(div);
        }
        function unSelect(){
            rangeObj.collapse(false);
        }
        function showRange(){
            alert(rangeObj.toString());
        }
    </script>

        var rangeObj=document.createRange();
        rangeObj.detach();