DOM节点——JS总结

DOM节点——JS总结

节点包括三种：属性节点、元素节点、文本节点 

HTML内容：	
         <div id = 'box' style = "color:red">测试Div<em>倾斜</em>结尾</div> 
<p>JavaScript内容： 
</p><p>        //父节点：
		window.onload = function(){
			var box = document.getElementById('box');		        //获取属性节点,如'[object HTMLDivElement]'
			alert(box);
			alert(box.tagName);						//获取标签名称，如‘DIV ’
 			alert(box.innerHTML);						//获取这个元素节点的文本，如‘测试Div’
 			alert(box.id);							//获取属性节点的值，如：‘box’
 			alert(box.getAttribut('id'));					//同上，获取属性节点的值，如：‘box’
			//注意：不兼容
			alert(box.getAttribut('style'));				//获取属性节点，如：'color:red'
			
			alert(box.className);						//获取class属性的值
			//对HTML文本进行替换、赋值，JS代码可以解析HTML代码，不再只是单纯的文本
			box.innerHTML = '玩转<strong>JS</strong>';	//将'测试Div'内容，换成了'玩转JS'
		}
		
	//子节点：
		//节点类型值:
			//元素节点为：1
			//属性节点为：2
			//文本节点为：3
		window.onload = function(){
			var box = document.getElementById('box');
			//获取标签名称，等价于tagName
			//alert(box.nodeName);					        // "DIV"
			//alert(box.childNodes.length);			                // "3 " ,三个子节点
			//上面的标签存在3个子节点：测试Div<em>倾斜</em>结尾</div>
			//第一个子节点为："测试Div"  			                ——文本节点
			//第二个子节点为："<em>倾斜</em>"		                ——元素节点
			//第三个子节点为："结尾"				        ——文本节点
		
		//检验方法如下：
			alert(box.childNodes[0]);			                // "Object Text" ,表示一个文本节点
			alert(box.childNodes[0].nodeType);		                // "3 ",类型值，表示文本节点
			
			//获取文本节点的文本内容
			//1)获取'子节点'的文本内容
			alert(box.childNodes[0].nodeValue);		                // "测试Div"
			alert(box.childNodes[1].nodeValue);		                // "Null"
			alert(box.childNodes[2].nodeValue);		                // "结尾"
			
			//2)获取获取'节点'的文本节点
			alert(box.innerHTML);					// "测试Div<em>倾斜</em>结尾</div>"
			alert(box.childNodes[1].innerHTML);		// "倾斜"
			//实质"<em>倾斜</em>"算是一个标签，nodeName仍可以理解为获取标签名称
			alert(box.childNodes[1].nodeName);		// "EM"
				
		}
		
	//元素节点、文本节点
		window.onload = function () {
			var box = document.getElementById('box');
			for ( var i = 0; i<box.childNodes.length; i++){	                //遍历 标签下 的所有 子节点
				if (box.childNodes[i].nodeType ===1 ){		        //若：元素节点
					alert(box.childNodes[i].innerHTML);		//返回元素节点的 文本
				}else if (box.childNodes[i].nodeType ===3 ){		//若：文本节点
					alert(box.childNodes[i].nodeValue);		//返回文本节点的 文本
				}
			}
		}
</p>

在操作中，准确找到节点，做相应的设置，最终达到需要的效果！