js_Range

来源：互联网发布：58淘宝模特兼职的骗局编辑：程序博客网时间：2024/04/30 10:56
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">var EventUtil={addEventListener:function(element,type,handler){if(element.addEventListener){element.addEventListener(type,handler,false);}else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;};}};window.onload=function(){var aFunction=function() {var range1 = document.createRange();range2 = document.createRange();p1 = document.getElementById("p1");range1.selectNode(p1);range2.selectNodeContents(p1);alert(range1.startContainer);alert(range2.startContainer);};EventUtil.addEventListener(document.getElementsByTagName("input").item(0), "click", aFunction);var bFunction=function(){var range1=document.createRange(),range3=document.createRange(),pNode=document.getElementById("p1");//通过截取的方式获得p1节点，及其包含的节点varpNodePosition=-1;for(var i=0,len=pNode.parentNode.childNodes.length;i<len;i++){if(pNode.parentNode.childNodes[i] === pNode){//记录p节点的索引pNodePosition=i;break;}};range1.setStart(pNode.parentNode,pNodePosition);range1.setEnd(pNode.parentNode,pNodePosition+1);range3.selectNode(pNode);alert(range1 === range3);alert(range1.startContainer=== range3.startContainer);alert(range1.endContainer === range3.endContainer);alert(range1.startOffset === range3.startOffset);alert(range1.endOffset === range3.endOffset);};EventUtil.addEventListener(document.getElementsByTagName("input").item(1), "click", bFunction);var cFunction=function(){var range=document.createRange(),pNode=document.getElementById("p2");range.setStart(pNode.firstChild.firstChild,2);range.setEnd(pNode.lastChild,3);alert(range);};EventUtil.addEventListener(document.getElementsByTagName("input").item(2), "click", cFunction);var dFunction=function(){var range=document.createRange(),pNode=document.getElementById("p2");range.setStart(pNode.firstChild.firstChild,2);range.setEnd(pNode.lastChild,3);//deleteContents//cloneContentsvar fragment=range.extractContents();alert(fragment);pNode.appendChild(fragment);};EventUtil.addEventListener(document.getElementsByTagName("input").item(3), "click", dFunction);var fFunction=function(){var range=document.createRange(),pNode=document.getElementById("p2");range.setStart(pNode.firstChild.firstChild,2);range.setEnd(pNode.lastChild,3);//insertNode,在范围起点的地方var spanNode=document.createElement("span");spanNode.appendChild(document.createTextNode("这里额外加点内容"));spanNode.style.color="red";//range.insertNode(spanNode);//surrondContents();环绕插入，即将选定的范围包围range=document.createRange();range.selectNode(document.getElementsByTagName("p").item(1));range.surroundContents(spanNode);//复制?这里存在疑问，克隆出的节点不能加入DOM中，报错：Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. //意思是这里的newRange不是一个Node类型，做类型判断时证明这是一个Object类型，既是他复制的是一个完整的范围(p2Node)也不行var clonedRange=document.createRange().selectNode(pNode);var newRange=clonedRange.cloneRange();alert(typeof newRange);document.body.appendChild(newRange);//范围使用完成后清除range.detach();range=null;};EventUtil.addEventListener(document.getElementsByTagName("input").item(4), "click", fFunction);};</script></head><body>范围：Range类型的属性和方法<br>startContainer:包含范围起点的节点(即第一个节点的父节点)<br>endContainer:包含范围终点的节点(即最后一个节点的父节点)<br>startOffset:范围的起点在startContainer中的偏移量<br>endOffset:范围的终点在endContainer中的偏移量<br>commonAcestorContainer:startContainer和endContainer共同的祖先节点在文档树中最深的那个<br><br><br><input type="button" value="截取范围--简单"><p id="p1"><b>Hello</b> World!</p><input type="button" value="截取范围--复杂"><p id="p2"><b>Hello</b> World!</p><input type="button" value="截取片段1l-1o"><br><br><input type="button" value="删除/移动1l-1o"><br><br><input type="button" value="插入DOM"></body></html>
Range
0 0