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

最新推荐文章于 2023-09-29 00:09:03 发布

xiaozhen0610

最新推荐文章于 2023-09-29 00:09:03 发布

阅读量114

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hj1jcca2b0ab.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

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可以实现内容提取.

xiaozhen0610

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5学习笔记5--API Range对象(二)

Range对象之cloneRange和cloneContents代码效果如下首次点击“选择内容“按钮提示如下接着会显示最后显示以下为整个代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> functio.
复制链接

扫一扫