这是前两天的笔记了，就是range的应用，跟大家分享一下
使用range对象的方法可以用来进行复制、追加、克隆等操作
1、cloneRange的简单使用
代码示例：利用cloneRange方法来进行克隆
<script>
function cloneRange(){
var rangetext=document.createRange();
var newP=document.getElementById("p");
rangetext.selectNodeContents(newP);
var rangeClone=rangetext.cloneRange();
alert(rangeClone.toString());
}
</script>
<p id="p">这是一段用于测试的内容</p>
<button onclick="cloneRange()">克隆</button>
2、rangeContent方法，用于在页面中追加一段HTML代码，并且将range对象区域中所代表的HTML代码克隆并显示在相应位置，这里我们是要显示在后面
代码示例：将页面内容克隆并显示在页面的另一地方
<script>
function cloneContent(){
var D=document.getElementById("D");
var rangeObj=document.createRange();
rangeObj.selectNodeContents(D);
var docFrangeMent=rangeObj.cloneContents();
D.appendChild(docFrangeMent);
}
</script>
<div id="D">
人生若只如初见，何处秋风悲画扇。
<br />
<button onclick="cloneContent()">克隆</button>
<br />
</div>
createRange方法：移动页面内的相关内容到其他地方
<script>
function moveContent(){
var srcDiv=document.getElementById("srcDiv");
var distDiv=document.getElementById("distDiv");
var rangeObj=document.createRange();
rangeObj.selectNodeContents(srcDiv);
var docFragment=rangeObj.extractContents();
distDiv.appendChild(docFragment);
}
</script>
<div id="srcDiv" style="background-color:aquamarine;width:300px;height:50px">hello world</div>
<div id="distDiv" style="background-color:bisque;width:300px;height:50px"></div>
<button onclick="moveContent()">点击移动元素</button>
insertNode方法：用于指定节点插入到某个range对象所代表的区域中，插入位置为range对象所代表的起点位置，如果该节点已经存在了页面当中，那么该节点被移动到该节点所代表对象的起点处
代码示例：移动按钮（也可以设置成其他的）
<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="width:400px;background-color:bisque">
欢迎来到我的测试页面，在这里，本页面的内容都是用来测试按钮的移动效果的
</div>
<button id="button">按钮</button>
collapse方法：用于选取元素或者取消元素
代码示例：
<script>
var rangeObj=document.createRange();
function selectRangeConents(){
var div=document.getElementById("div");
rangeObj.selectNode(div);
}
function unselect(){
rangeObj.collapse(false);
}
function showRange(){
alert(rangeObj.toString());
}
</script>
<div id="div" style="background-color:bisque;width:500px;height:50px">春风十里处处青</div>
<button onclick="selectRangeConents()">选择相应元素</button>
<button onclick="unselect()">取消选中元素</button>
<button onclick="showRange()">显示所选元素</button>
detach方法：用于释放该range对象，释放后将不能再访问该range对象，否则将抛出脚本错误
|
|
收藏
淘帖
踩
