js_Range

最新推荐文章于 2024-05-29 17:37:28 发布

bh1990

最新推荐文章于 2024-05-29 17:37:28 发布

阅读量1.1k

点赞数

分类专栏： JS 文章标签： js api

本文链接：https://blog.csdn.net/bh1990/article/details/42899675

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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.οnlοad=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节点，及其包含的节点
			var	pNodePosition=-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
				//cloneContents
				var 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

bh1990

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js_Range

Insert title here var EventUtil={ addEventListener:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEven
复制链接

扫一扫