摘要:本篇教程探讨了Html5零基础学习(5)API Range对象(下),希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了Html5零基础学习(5)API Range对象(下),希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
Range对象之cloneRange和cloneContents
代码效果如下
首次点击“选择内容“按钮提示如下
接着会显示
最后显示
以下为整个代码
复制代码
<!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
效果图如下
代码如下
复制代码
<!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可以实现内容提取.
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号