HTML5 编辑 API 之 Range 对象
Range对象基本概念
Range对象基本概率
一个Range对象代表页面上一段连续区域。
通过Range对象，可以获取或修改网页上的任何区域。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>range对象</title>
</head>
<body>
<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>
</body>
</html>Range方法之SelectNode方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>range selectNode方法</title>
</head>
<body>
<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: #e0a0b0;width: 300px;height: 50px;">
元素中的内容
</div>
<button onclick="deleteRangeContent(true)">删除内容</button>
<button onclick="deleteRangeContent(false)">删除元素</button>
</body>
</html>
选择删除内容这会删除掉“元素中的内容”这几个字
选择删除元素就会删除掉整个红色的地板和文字。
setStart、setEnd方法
通过setStart和setEnd来确定Range对象的内容。再将其进行删除等操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>range setStart、setEnd</title>
</head>
<body>
<script>
function deleteChar(){
var div = document.getElementById("myDiv");
var textNode = div.firstChild;
var rangeObj = document.createRange();
rangeObj.setStart(textNode,1);
rangeObj.setEnd(textNode,4);
rangeObj.deleteContents();
}
</script>
<div id="myDiv" style="color: red;">
这段字是用来删除的
</div>
<button onclick="deleteChar()">删除文字</button>
</body>
</html>
点击“删除文字”之后，“这段字”就会被删除掉。
setStartBefore、setEndAfter等方法
setStartBefore（row）Range对象在row之前开始，
setEndAfter（row）Range对象在row之后结束。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setStartBefore\setEndAfter</title>
</head>
<body>
<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" cellspacing="0" cellpadding="0">
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>
<button onclick="deleteRow()">删除第一行</button>
</body>
</html>
点击“删除第一行”之后，第一行的内容1和内容2 被删除掉。
cloneRange、cloneContents、extractContents方法
cloneRange方法
通过cloneRange（）方法，把原有的p标签中的内容Range对象克隆过来，并通过alert（）把克隆对象显示出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cloneRange</title>
</head>
<body>
<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>
</body>
</html>
cloneContents方法介绍
var docFrangMent = rangeObj.cloneContents()将原Range对象的所有内容拷贝出来，再通过div.appendChild(docFrangMent);将拷贝的内容添加到div模块中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cloneContents</title>
</head>
<body>
<script>
function cloneContent(){
var div = document.getElementById("div");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(div);
var docFrangMent = rangeObj.cloneContents();
div.appendChild(docFrangMent);
}
</script>
<div id="div">
你好么？
<br />
<button onclick="cloneContent()">克隆</button>
<br />
</div>
</body>
</html>
点击“克隆”之后，会将div中的内容复制一份。并且div中的内容得到了改变。
extractContents方法
通过var docFragment = rangeObj.extractContents() 实现内容的剪切。通过distDiv.appendChild(docFragment)实现内容的粘贴。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>extractContents方法</title>
</head>
<body>
<script>
function moveContent(){
var srcDiv = document.getElementById("srcDiv");
var distDiv = document.getElementById("distDiv");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(srcDiv); //range代表srcDiv的内容
var docFragment = rangeObj.extractContents(); //range像是指针对象，会修改原变量
distDiv.appendChild(docFragment);
}
</script>
<div id="srcDiv" style="background-color: aqua;width: 300px;height: 50px;">测试内容</div>
<div id="distDiv" style="background-color:bbisque;width: 300px;height: 50px;"></div>
<button onclick="moveContent()">移动元素</button>
</body>
</html>
点击“移动元素”之后，“测试内容”四个字从蓝底模块移动到了白底模块。
insertNode方法、compareBoundaryPoints方法
insertNode方法
通过点击，随意移动按钮
var range = selection.getRangeAt(0)找到位置？
range.insertNode(btn)插入按键
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>insertNode</title>
</head>
<body>
<script>
function moveButton(){
var btn = document.getElementById("button");
var selection = document.getSelection();
// get到的这个selection指的是什么，鼠标选择到的内容？
if(selection.rangeCount>0){
// 选择内容不为空
var range = selection.getRangeAt(0); //传0 是什么意思？
range.insertNode(btn); //指定插入内容为btn
}
}
</script>
<div onmouseup="moveButton()" style="width: 400px;background-color: bisque;">
这是测试的内容，只是测试而已。
</div>
<!--onmouseup 事件会在鼠标松开时发生-->
<button id="button">按钮</button>
</body>
</html>
点哪儿，按键就会移动到哪儿。
compareBoundaryPoints方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>compareBoundaryPoints</title>
</head>
<body>
<script>
function testPlace(){
var boldText = document.getElementById("boldText");
var boldRange = document.createRange();
boldRange.selectNodeContents(boldText.firstChild);
// 这个range对象代表的是boldText.的firstChild
var selection = document.getSelection();
if(selection.getRangeCount>0){
var selRange = selection.getRangeAt(0); //第一个选择对象
if(selRange.compareBoundaryPoints(Range.START_TO_END,boldRange)<=0){
alert("选取的文字在粗体前面");
}else if(selRang.compareBoundaryPoints(Range.END_TO_START,boldRange)>=0){
alert("选取的文字在粗体后面");
}
}
}
</script>
这是一段文字，一段用来<b id="boldText">测试</b>的文字。
<br />
<button onclick="testPlace() ">位置比较 </button>
</body>
</html>
collapse、detach方法
rangeObj.collapse(false)显示取消选中的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>collapse</title>
</head>
<body>
<script>
var rangeObj = document.createRange();
function selectRangContents(){
var div = document.getElementById("div");
rangeObj.selectNode(div);
}
function nuselect(){
rangeObj.collapse(false);
}
function showRange(){
alert(rangeObj.toString());
}
</script>
<div id="div" style="background-color:bisque;width: 300px;height: 50px;">元素的内容</div>
<button onclick="selectRangContents()">选择元素</button>
<button onclick="nuselect()">取消元素</button>
<button onclick="showRange()">显示range内容</button>
</body>
</html>
点击“选择元素”-“显示range内容”则显示如上。
点击“选择元素”-“取消选择”-“显示range内容”则显示如下。
本博客内容到此结束，欢迎交流讨论！
扫一扫
1835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
