您的位置：首页 > Web前端 > HTML5

HTML5——Range对象（2）

2016-05-04 09:43 671 查看




1、cloneRange、cloneContents、extractContents方法

<body>
<p id="p">这里是随便书写的内容</p>
<button onclick="cloneRange()">克隆</button>
</body>
<script>
function cloneRange() {
var rangeObj = document.createRange();
rangeObj.selectNodeContents(document.getElementById("p"));
var rangeClone = rangeObj.cloneRange();
alert(rangeClone.toString());
}
</script>


cloneRange方法复制该范围（Range）。
<body>
<div id="div">
你好吗？
<br>
<button onclick="cloneContent()">克隆</button>
<br>
</div>
</body>
<script>
function cloneContent() {
var div = document.getElementById("div");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(div);
var docFrangMent = rangeObj.cloneContents();
div.appendChild(docFrangMent);
}
</script>


cloneContents方法会克隆range的整个文档节点，返回一个DocumentFragment（文档碎片节点）。

cloneContents方法把范围（Range）的内容复制到一个DocumentFragment对象。
<body>
<div id="srcDiv" style="background-color:aquamarine;width:300px;height:50px;">你好吗？</div>
<div id="distDiv" style="background-color:bisque;width:300px;height:50px"></div>
<button onclick="moveContent()">移动元素</button>
</body>
<script>
function moveContent() {
var srcDiv = document.getElementById("srcDiv");
var distDiv = document.getElementById("distDiv");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(srcDiv);
var docFrangMent = rangeObj.extractContents();
distDiv.appendChild(docFrangMent);
}
</script>


extractContents方法删除文档内容，并以DocumentFragment对象的形式返回它。即返回一个DocumentFragment节点。

如上例，extractContents方法会获取srcDiv中的所有内容。


2、insertNode方法、compareBoundaryPoints方法

insertNode方法，在范围（Range）的开头插入一个节点。
<body>
<div onmouseup="moveButton()" style="width:400px;background-color:bisque">
这里是随便写的文字。
 </div>
<button id="button">按钮</button>
</body>
<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>


点击文字区域的时候，会将按钮移动到文字区域中。

compareBoundaryPoints(how, sourceRange)方法

Range.START_TO_START - 比较两个 Range 节点的开始点
Range.END_TO_END - 比较两个 Range 节点的结束点
Range.STARTTO_END - 用 _sourceRange 的开始点与当前范围的结束点比较
Range.ENDTO_START - 用 _sourceRange 的结束点与当前范围的开始点比较

<body>
这是一段文字，我也不<b id="boldTest">知道</b>写写什么。随便吧。
<br>
<button onclick="testPlace()">位置比较</button>
</body>
<script>
function testPlace() {
var boldText = document.getElementById("boldTest");
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>


4、collapse方法与detach方法

collapse()方法是范围的边界点重合。

collapse(toStart)

参数toStart设置为true，该方法将把范围的结束点设置为与开始点相同的值。否则，它将把范围的开始的设置为与结束点相同的值。

detach方法，释放点Range对象。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航