Range对象
2017-11-02 本文已影响8人
akubaba
内容整理自网上！！！
一、range和selection
实现效果：
谷歌浏览器效果
火狐浏览器可以实现多选
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function rangeTest() {
var html;
var showDiv=document.getElementById('show');
var 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/>";
}
showDiv.innerHTML=html;
}
}
</script>
selection对象和range对象的使用
<input type="button" value="click" onclick="rangeTest()">
<div id="show"></div>
<br/>
<br/>
<div id="div" style="background-color: #e0a0b0;width: 300px;height: 50px">
元素中的内容
</div>
<button onclick="deleteRangeContent(true)">删除内容</button>
<button onclick="deleteRangeContent(false)">删除元素</button>
</body>
</html>
二、selectNode等方法
实现效果：
删除内容、删除元素
代码：
<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>
