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

1、cloneRange、cloneContents、extractContents方法

<p id="pid">这里随意书写</p>
<button onclick="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 onclick="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 onclick="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 onmouseup="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 onclick="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 onclick="selectRangeContents()">选择元素</button>
<button onclick="unSelect()">取消元素</button>
<button onclick="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();