沉淀-初级html5（二）

HTML5编辑API之Range对象

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

Selection对象与Range对象的使用
<input type="button" value="点击我" onclick="rangeTest()">
<div id="showRange"></div>

Range方法之SelectNode，SelectNodeContents、deleteContents方法

<!--操作删除内容和删除元素-->
<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: #333;width: 300px;height: 50px;">
元素中的内容
</div>
<button onclick="deleteRangeContent(true)">删除内容</button>
<button onclick="deleteRangeContent(false)">删除元素</button>

Range方法之setStart、setEnd、setStartBefore、setStartAfter、setEndBefore、setEndAfter方法

<!--操作删除文字-->
<script>
    function deleteChar() {
var div=document.getElementById("Div");
var textNode=div.firstChild;
var rangeObj=document.createRange();
    rangeObj.setStart(textNode,1);
    rangeObj.setEnd(textNode,4);
    rangeObj.deleteContents();
    }
</script>
<div id="Div" style="color: red">
删除的文字
</div>
<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="1" cellpadding="0" cellspacing="0">
<tr>
    <td>内容1</td>
    <td>内容2</td>
</tr>
 <tr>
    <td>内容3</td>
    <td>内容4</td>
 </tr>
</table>
<button onclick="deleteRow()">删除第一行</button>

Range方法之cloneRange、cloneContents、extractContents方法

<!--rangeClone操作克隆文字-->
<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>

<!--rangeContents操作克隆文字-->
<script>
    function cloneContent() {
     var div=document.getElementById("div");
    var rangeObj=document.createRange();
    rangeObj.selectNodeContents(div);
    var contentClone=rangeObj.cloneContents();
    div.appendChild(contentClone);
    }
</script>
<div id="div">这是克隆的内容</div>
<br>
<button onclick="cloneContent()">克隆</button>
<br>

<!--extractContents操作移动文字-->
<script>
    function moveContent() {
     var div1=document.getElementById("div1");
     var div2=document.getElementById("div2");
    var rangeObj=document.createRange();
        rangeObj.selectNodeContents(div2);
    var extractContent=rangeObj.extractContents();

        div1.appendChild(extractContent);
    }
</script>
<div id="div1" style="background-color: #7e8c8d;width: 300px;height: 50px">这是克隆的内容</div>
<div id="div2" style="background-color: #333;width: 300px;height: 50px"></div>
<br>
<button onclick="moveContent()">移动元素</button>

Range方法之collapse、detach方法

<!--collapse选取文字-->
<script>
    var rangeObj=document.createRange();
    function selectRangeContents() {
        var div = document.getElementById("div");
        rangeObj.selectNode(div);
        //rangeObj.detach();  释放rangeObj
    }
    function unSelect() {
        rangeObj.collapse(false);
    }
    function showRange() {
        alert(rangeObj.toString());
    }
</script>
<div id="div" style="background-color: #7e8c8d;width: 300px;height: 50px">元素中的内容</div>
<br>
<button onclick="selectRangeContents()">选择元素</button>
<button onclick="unSelect()">取消元素</button>
<button onclick="showRange()">显示Range内容</button>

Range方法之insertNode、compareBoundaryPoints方法

<!--insertNode移动元素-->
<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>
<div onmouseup="moveButton" style="background-color: #7e8c8d;width: 300px;height: 50px">元素中的内容</div>
<br>
<button id="button">按钮</button>

<!--compareBoundaryPoints判断选取元素的位置-->
<script>
    function testPlace() {
        var boldText = document.getElementById("boldText");
       var boldRange=document.createRange();
        boldRange.selectNodeContents(boldText.firstChild);
        var selection=document.getSelection();
       if(selection.rangeCount>0){
           var range=selection.getRangeAt(0);
           if(range.compareBoundaryPoints(Range.START_TO_END,boldRange)<=0) {
               alert("选取的文字在粗体前面");
           } else{
                   if(range.compareBoundaryPoints(Range.END_TO_START,boldRange)>=0){
                       alert("选取的文字在粗体后面");
                   }
               }

           }


    }
</script>
这是<b id="boldText">元素</b>中的内容
<br>
<button onclick="testPlace()">位置比较</button>