Range对象之cloneRange和cloneContents

代码效果如下

首次点击“选择内容“按钮提示如下

html5学习笔记5--API Range对象(二)-LMLPHP

接着会显示

html5学习笔记5--API Range对象(二)-LMLPHP

最后显示

以下为整个代码html5学习笔记5--API Range对象(二)-LMLPHP

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function selectContent()
{
var element=document.getElementById("divContent");
var rangeObject=document.createRange();
rangeObject.selectNodeContents(element);
var objectRange=rangeObject.cloneRange()
alert(objectRange.toString());
var objectContent=rangeObject.cloneContents();
alert(objectContent.toString());
element.appendChild(objectContent);
}
</script>
<div id="divContent">
<p>内容</p>
</div>
<button onclick="selectContent()">选择内容</button>
</body>
</html>

看了以上代码和效果也能知道cloneRange和cloneContents的区别了,最主要的是在实际应用中体会吧.

Range对象之extractContents

效果图如下

html5学习笔记5--API Range对象(二)-LMLPHP

代码如下

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function selectContent()
{
var element=document.getElementById("divContent");
var elementSecond=document.getElementById("divNoContent");
var rangeObject=document.createRange();
rangeObject.selectNodeContents(element);
var objectRange=rangeObject.extractContents();
elementSecond.appendChild(objectRange);
}
</script>
<div id="divContent" style="width:200px;height: 100px;background-color: red">
<p>内容</p>
</div>
<div id="divNoContent" style="width:200px;height: 100px;background-color: green">
</div>
<button onclick="selectContent()">选择内容</button>
</body>
</html>

extractContens可以实现内容提取.

05-02 18:19