9 HTML5编辑之Range对象（二）-福州大学城社区

9 HTML5编辑之Range对象（二）网页前端/web开发工程师

/ 厦门大学外国语学院网页前端/web开发工程师 / 2016-07-31

HTML5,前端

1.CloneRange方法

代码示例：

<script>
    function cloneRange()
    {
        var rangeObj=document.createRange();
        var p = document.getElementById("p");
        rangeObj.selectNodeContents(p);
        var rangeClone = rangeObj.cloneRange();
        alert(rangeClone.toString());
    }
</script>
<p id="p">
    这是随便写的内容
</p>
<button onclick="cloneRange()">克隆</button>

2.cloneContents方法

代码示例:<script>
    function cloneContent()
    {
        var div=document.getElementById("div");
        var rangeObj=document.createRange();
        rangeObj.selectNodeContents(div);
        var docClone = rangeObj.cloneContents();
        div.appendChild(docClone);
    }
</script>

<div id="div">
     你是谁
     <br/>
     <button onclick="cloneContent()">克隆</button>
     <br/>
 </div>

<div id="div">
     你是谁
     <br/>
     <button onclick="cloneContent()">克隆</button>
     <br/>
 </div>

<div id="div">
     你是谁
     <br/>
     <button onclick="cloneContent()">克隆</button>
     <br/>
 </div>
<div id="div">
     你是谁
     <br/>
     <button onclick="cloneContent()">克隆</button>
     <br/>
 </div>

3.extractContents方法

代码示例：

<script>
     function moveContent()
     {
         var firstDiv = document.getElementById("firstDiv");
         var secondDiv = document.getElementById("secondDiv");
         var rangeObj = document.createRange();
         rangeObj.selectNodeContents(firstDiv);
         var docFragment=rangeObj.extractContents();
         secondDiv.appendChild(docFragment);
     }
 </script>
 <div id="firstDiv" style="background-color: aqua ;width: 300px ;height:50px">hello</div>
 <div id="secondDiv" style="background-color: aliceblue;width: 300px;height: 50px"> </div>
 <button onclick="moveContent()">移动元素</button>

4.collapse方法

代码示例：

<script>
     var rangeObj = document.createRange();
     function selectRangeContents()
     {
         var div=document.getElementById("div");
         rangeObj.selectNode(div);
     }
     function unselect()
     {
         rangeObj.collapse(false);
     }
     function showRange()
     {
         alert(rangeObj.toString());
     }
 </script>
 <body>
 <div id="div" style="background-color: aquamarine;width: 100px;height: 50px">元素显示区域</div>
 <button onclick="selectRangeContents()">选择元素</button>
 <button onclick=" unselect()">取消选择</button>
 <button onclick="showRange()">显示元素</button>

HTML5,前端

5.insertNode方法

代码示例：

<script>
     function moveButton()
     {
         var btn =document.getElementById("button");
         var selection = document.getSelection();
         var range=selection.getRangeAt(0);
         range.insertNode(btn);
 
     }
 </script>
 <div onmouseup="moveButton()" style="background-color: aquamarine;width: 500px ;height: 40px">
     这里是我随便写的文字段落。可以自己修改
 </div>
 
 <button id="button">按钮</button>

Act师大校友联盟

1914篇文章

大家好，我是小明，请多多指教！

9 HTML5编辑之Range对象（二）网页前端/web开发工程师

最近内容