[html5] 学习笔记- 编辑API之Range对象
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[html5] 学习笔记- 编辑API之Range对象相关的知识，希望对你有一定的参考价值。
本节继续介绍range对象的方法，包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment,insertNode,compareBoundaryPoints,collapse,detach方法。
1、cloneRange,cloneContents,extraContents方法
cloneRange：对当前的range对象复制，返回复制的对象
1 <body> 2 <script> 3 function cloneRange(){ 4 var rangeObj = document.createRange(); 5 rangeObj.selectNodeContents(document.getElementById("p")); 6 var rangeClone = rangeObj.cloneRange(); 7 alert(rangeClone.toString()); 8 } 9 </script> 10 <p id="p">这里是随便书写的内容</p> 11 <button onclick="cloneRange()">克隆</button> 12 </body>
cloneContents：用于克隆并追加html代码
1 <body> 2 <script> 3 function cloneContent(){ 4 var div = document.getElementById("div"); 5 var rangeObj = document.createRange(); 6 rangeObj.selectNodeContents(div); 7 var docFrangeMent = rangeObj.cloneContents(); 8 div.appendChild(docFrangeMent); 9 } 10 </script> 11 <div id="div"> 12 你好吗？ 13 <br/> 14 <button onclick="cloneContent()">克隆</button> 15 <br/> 16 </div> 17 </body>
extraContents：将range对象的内容剪切到另一个对象中
1 <body> 2 <script> 3 function moveContent(){ 4 var srcDiv = document.getElementById("srcDiv"); 5 var distDiv = document.getElementById("distDiv"); 6 var rangeObj = document.createRange(); 7 rangeObj.selectNodeContents(srcDiv); 8 var docFragment = rangeObj.extractContents(); 9 distDiv.appendChild(docFragment); 10 } 11 </script> 12 <div id="srcDiv" style="background-color:aquamarine;width: 300px;height: 50px">你好吗</div> 13 <div id="distDiv" style="background-color:bisque;width: 300px;height: 50px"></div> 14 <button onclick="moveContent()">移动元素</button> 15 </body>
2、insertNode,compareBoundaryPoints方法
insertNode：将节点插入到range对象中
1 <body> 2 <script> 3 function moveButton() { 4 var btn = document.getElementById("button"); 5 var selection = document.getSelection(); 6 if (selection.rangeCount>0) { 7 var range = selection.getRangeAt(0); 8 range.insertNode(btn); 9 } 10 } 11 </script> 12 <div onmouseup="moveButton()" style="background-color: bisque;width: 400px"> 13 这里是我随便书写的一些文字这里是我随便书写的一些文字这里是我随便书写的一些文字这里是我随便书写的一些文字 14 </div> 15 <button id="button">按钮</button> 16 </body>
compareBoundaryPoints：用于比较两个range对象的起点或终点位置
1 <body> 2 <script> 3 function testPlace() { 4 var boldText = document.getElementById("boldTest"); 5 var boldRange = document.createRange(); 6 boldRange.selectNodeContents(boldText.firstChild); 7 var selection = document.getSelection(); 8 if (selection.rangeCount>0) { 9 var selRange = selection.getRangeAt(0); 10 if (selRange.compareBoundaryPoints(Range.START_TO_END,boldRange)<=0) { 11 alert("选取的文字在粗体前面"); 12 }else{ 13 if (selRange.compareBoundaryPoints(Range.END_TO_START,boldRange)>=0) { 14 alert("选取的文字在粗体后面"); 15 } 16 } 17 } 18 } 19 </script> 20 这是一段文字，我也不<b id="boldTest">知道</b>写什么，随便吧 21 <br/> 22 <button onclick="testPlace()">位置比较</button> 23 </body>
3、collapse、detach方法
collapse：将range对象所代表区域的终点移动到起点处，或者反过来
1 <body> 2 <script> 3 var rangeObj = document.createRange(); 4 function selectRangeContents(){ 5 var div = document.getElementById("div"); 6 rangeObj.selectNode(div); 7 } 8 function unselect(){ 9 rangeObj.collapse(false); 10 } 11 function showRange(){ 12 alert(rangeObj.toString()); 13 } 14 </script> 15 <div id="div" style="background-color: bisque;width: 400px;height: 50px;"> 16 元素中的内容 17 </div> 18 <button onclick="selectRangeContents()">选择内容</button> 19 <button onclick="unselect()">取消内容</button> 20 <button onclick="showRange()">显示内容</button> 21 </body>
detach:用于释放对象，释放之后，将不能再次访问该对象；通常应该释放掉不需要的range对象，以提高程序的性能。
以上是关于[html5] 学习笔记- 编辑API之Range对象的主要内容，如果未能解决你的问题，请参考以下文章