h5编辑API-Range对象

cloneRange/cloneContents/extractContents方法

cloneRange用于当前Range对象进行复制，该方法返回当前Range的对象

<p id="p">这是啥东西</p><button onclick="xx()">克隆</button><script>function xx(){var rangeObj = document.createRange(); //创建Range对象rangeObj.selectNodeContents(document.getElementById("p"));var rangeClone = rangeObj.cloneRange();alert(rangeClone.toString());//获取克隆对象并且显示}</script>

cloneContents方法用于在页面上追加一段html代码，并且将Range对象所代表的区域中的html代码克隆到追加到html代码之后。

<div id="div">鞋子<br /><button onclick="xx()">克隆内容</button></div><script>function xx(){var div = document.getElementById("div");var rangeObj = document.createRange();rangeObj.selectNodeContents(div);//获取当前内容var docfrangment = rangeObj.cloneContents();//克隆div.appendChild(docfrangment);//追加}</script>

extractContents方法用于Range对象所代表的区域中html代码克隆到document对象中

<div id="src" style="background-color: blueviolet; width: 300px; height: 50px;">移动到其他div</div><div id="dis" style="background-color: coral; width: 300px; height: 50px;"></div><button onclick="xx()">移动元素</button><script>function xx(){var src = document.getElementById("src");var dis = document.getElementById("dis");var rangeObj = document.createRange();rangeObj.selectNodeContents(src);//获取第一个div中内容var doc = rangeObj.extractContents();dis.appendChild(doc);}</script>

insertNode/compareBoundaryPoints方法

insertNode方法用于指定节点插入到某个Range对象所代表的区域中，插入位置为Range对象所代表区域的起点位置，如果该点在页面中已存在，那么该节点被移动到Range对象所代表区域的起点处。

<div onmouseup="x1()" style="width: 400px; background-color: aquamarine;"><!--指定一个鼠标按下事件-->啥东西啊这都是</div><button id="button">按钮</button><script>function x1(){var btn = document.getElementById("button");var selection = document.getSelection();if(selection.rangeCount>0){var range = selection.getRangeAt(0);range.insertNode(btn);}}</script>

compareBoundaryPoints方法用于比较两个Range对象的起点位置或终点位置

这个<b id="boldtest">世界</b>那么大，都应该去看看。我还有好多事情没有尝试，好多风景没有去看，好多路没有去走。我还没有完成好多的愿望，还么有陪他们老去，没有带她到处走走，没有很大气的一拍桌子的说走就走。<br /><button onclick="hehe()">位置比较</button><script>function hehe(){var boldext = document.getElementById("boldtest");//获取加粗文字id    var boldrange = document.createRange();    boldrange.selectNodeContents(boldext.firstChild);    var selection = document.getSelection();    if(selection.rangeCount>0){    var selrange = selection.getRangeAt(0);    if(selrange.compareBoundaryPoints(Range.START_TO_END,boldrange)<=0){//小于等于0代表目前没有到我们文字加粗的位置    alert("选中粗体前文字");    }else{    if(selrange.compareBoundaryPoints(Range.END_TO_START,boldrange)>=0){    alert("选中粗体后文字");    }    }    }}</script>

collapse/detach方法

collapse方法用于Range对象所代表区域的终点移动到该区域的起点，或者起点移动到终点处。

<div id="div" style="background-color: crimson; width: 300px; height: 50px;">元素</div><button onclick="x1()">选择元素</button><button onclick="x2()">取消元素</button><button onclick="x3()">显示Range内容</button><script>var rangeobj = document.createRange();function x1(){var div = document.getElementById("div");rangeobj.selectNode(div);}function x2(){rangeobj.collapse(false);}function x3(){alert(rangeobj.toString());}</script>

detach方法用于浏览器中释放Range对象，释放后将不能再次访问Range对象，否则跑出错误

如下所示为上面代码点击事件x1中释放Range对象，则x2、x3事件不能获取Range对象

function x1(){var div = document.getElementById("div");rangeobj.selectNode(div);rangeobj.detach();}