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

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

posted @   tuohaibei  阅读(641)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae