javaScrpt DOM分析与实战

秋老师Domino

2015-04-27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test2</title>
<link href="css/cssDom.css"/>
<script src="js/DOM节点操作.js"></script>



<script type=text/javascript>
	//节点操作  如下几块
	//1节点获得那几种方式  getElementById  getElementsByTagName   getElementsByName
	//2节点的操作，增删改
	//3属性的操作，增删改
	//4文本的操作，增删改
	
	//再者注意这些方法是父节点调(像带child都是父节点调用此方法,反之parent就是子类调用，属性是元素节点的中属性，所以调用当前元素节点调用此方法了)，还是子节点调用，这个要注意
	window.onload=function(){
			//获得两个父节点
			var oDiv1=document.getElementById('div1');
			var oDiv2=document.getElementById('div2');
			
			//获得oDiv1下面的子节点
			var oDiv1CNodes=oDiv1.childNodes;
			
			console.info(removeWhiteNode(oDiv1,oDiv1CNodes));//已得到想要的
			//上述获得值不是所要的，清除空节点
			//思路：若是节点类型为3，判断文本节点的值,若为空清除掉
			function removeWhiteNode(parentNode,childNodes){
					for(var i=0;i<childNodes.length;i++){
							if(childNodes[i].nodeType==3 && (/^\s+$/g).test(childNodes[i].nodeValue)){
									parentNode.removeChild(childNodes[i]);
								}
						}
					return childNodes;
				}
				
				
			//兄弟节点的访问 previousSibling  nextSibling  //调用的方法当然是兄弟节点
			console.info(oDiv1CNodes[1].previousSibling.innerHTML);//前一个
			console.info(oDiv1CNodes[1].nextSibling.innerHTML);//后一个
			console.info(oDiv1CNodes[1].previousSibling.parentNode);//前一个-->父亲节点
			
			//以上都是查询节点及其内容，简单,下面开始节点具体的操作
			
			//添加一个节点 节点属性经及属性值,节点的内容
			var addDiv=document.createElement('div');//创建一个元素节点 div
			var addTextNode1=document.createTextNode('旬阳xxxxxxxxxx');
			//addDiv.setAttribute('id','div4');//这种方式添加属性id
			addDiv.setAttribute('xxxxx','神马xxxxxxx');//这样添加在这个节点类是看不到的，而id,className就可以看到
			//addDiv.appendChild(addTextNode1);
			//document.body.appendChild(addTextNode1);
			addDiv.appendChild(addTextNode1);
			oDiv1.appendChild(addDiv);
			//addDiv.appendChild(addTextNode1);
			console.info(oDiv1);//添加成功
			console.info(oDiv1CNodes);
			console.info(oDiv1CNodes[3].innerHTML="XXX");//这个地方的innerHTML地覆盖上面旬阳xxxxxxxxxx的值，想看变化，得debug
			oDiv1CNodes[3].setAttribute('id','div4');//这种方式也可以
			//console.info(oDiv1CNodes[3].setAtt);
			console.info(oDiv1CNodes[3].getAttribute('xxxxx'));	//可以获得	
			oDiv1CNodes[3].removeAttribute('xxxxx');
			console.info(oDiv1CNodes[3].getAttribute('xxxxx'));//null
			
			//创建文本节点
			//第一种
			var addTextNode=document.createTextNode('人生两件大事,一件是能找到一个能在这个悲惨的世界安生立命的工作，另一个就是一个幸福美满的家庭，前者是基础，后者则需用一生去证明');
			oDiv1CNodes[3].appendChild(addTextNode);//而此种用法不会覆盖，与innerHTML的用法形成对比
			//第二种 如添加属性一样，这样写addDiv.setAttribute('xxxxx','神马xxxxxxx');
			
			//替换与复制节点
			oDiv1.replaceChild(oDiv1CNodes[3].cloneNode(true),oDiv1CNodes[1]);
			
			
			
			
			//下面对文本节点进行操作
			//首先看下整个节点
			console.info(oDiv1CNodes);
			console.info(oDiv1CNodes.length);
			console.info(oDiv1CNodes[1].childNodes);//下面有两个text 文本
			console.info(oDiv1CNodes[1].childNodes[0].insertData(2,'我是插进来的'));
			console.info(oDiv1CNodes[1].childNodes[0].appendData('我是添加到最后位置'));
			console.info(oDiv1CNodes[1].childNodes[0].deleteData(17,1));//从第17个位置删除一个文字
			console.info(oDiv1CNodes[1].childNodes[0].replaceData(1,1,'替代x'));//从第一个文字替代1个文字，替代内容为'替代x'
			console.info(oDiv1CNodes[1].childNodes);
			
			//oDiv1CNodes[1].childNodes[0].splitData(4);//将原来的文本节点再分成两个节点
			//console.info(oDiv1CNodes[1].childNodes[0].substring(1,2));//从第一个位置，返回两个节点
			console.info(oDiv1CNodes[1].childNodes[0].hasOwnProperty('splitData'));
			console.info(oDiv1CNodes[1].childNodes[0].isPrototypeOf('splitData'));
			//是真是不支持这两个方法???
			//若这块清楚的，欢迎指出
			console.info(oDiv1CNodes[1].childNodes);
		};
</script>

<style>
	#div1{
		width:100px auto;
		background:#CC3
		}
	#div2{
		width:100px auto;
		background:#C99;
	}
</style>

</head>
<body>
	<div id='div1'>
    	<div>div1</div>
    	<div>div2</div>
        <div>div3</div>
    </div>
	
	<div id='div2'>
    	<div>div6</div>
    	<div>div7</div>
        <div>div8</div>
    </div>

</body>
</html>

dom