Range对象
2020-02-16 本文已影响0人
不语翕
什么是Range对象
- 页面上一段连续的区域
如何使用
- 创建Range对象
var rangeObj = document.createRange();
- 获取Selection中的某个range对象
var selection = document.getSelection();
if(selection.rangeCount>0)
{
var range = selection.getRangeAt(0);
}
- 选中某项元素内所有内容
var div = document.getElementById("myDiv");
//包含元素本身
rangeObj.selectNode(div);
//不包含元素本身
rangeObj.selectNodeContent(div);
- 删除元素
rangOjb.deleteContents();
- 指定位置的区域
var div = document.getElementById("myDiv");
var node = div.firstChild;
range.setStart(node,num); //起始位置
range.setEnd(node,num); //终止位置
//其他还有：setStartBefore方法，setStartAfter方法，setEndBefore方法与setEndAfter方法
- Clone Range
rangeObj.selectNodeContents(document.getElementById("p"));
var rangeClone = rangeObj.cloneRange(); //对当前range对象进行clone
var docFragment = rangeObj.cloneContents(); //用于在页面上追加html
- 将Range对象所代表区域的HTML代码克隆到一个 DocumentFragment中
<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: aqua;width: 300px;height: 50px;">这是一个等待被移动的文本</div>
<div id="distDiv" style="background-color:blanchedalmond;width: 300px;height: 50px;"></div>
<button onclick="moveContent()">移动文本</button>
- 将指定的节点插入到某个Range对象所代表的区域中
<body>
<script>
function moveButton()
{
var btn = document.getElementById("btn");
var selection = document.getSelection();
if(selection.rangeCount > 0)
{
var range = selection.getRangeAt(0);
range.insertNode(btn);
}
}
</script>
<div id="myDiv" onmouseup="moveButton()" style="background-color: cadetblue; width: 200px;height: 200px;">
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>
<button id="btn">按钮</button>
</body>
- 位置判断
<body>
<script>
function testPlace()
{
var boldText = document.getElementById("boldText");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(boldText.firstChild);
var selection = document.getSelection();
if(selection.rangeCount > 0)
{
var selRange = selection.getRangeAt(0);
if(selRange.compareBoundaryPoints(Range.START_TO_END,rangeObj) <= 0)
{
alert("选中文字在粗体前面")
}
else if(selRange.compareBoundaryPoints(Range.END_TO_START,rangeObj) >= 0)
{
alert("选中文字在粗体后面");
}
}
}
</script>
这是一段判断选中字符在<b id="boldText">粗体</b>前后位置的方法示例文字
<button onclick="testPlace()">判断</button>
</body>
- 取消选中的Range
rangeObj.collapse(false);
- 释放Range对象
rangeObj.detach();
