什么是Range对象
如何使用
var rangeObj = document.createRange();
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方法
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>
rangeObj.collapse(false);
rangeObj.detach();
网友评论