DOM节点——JS总结

DOM节点——JS总结

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

HTML内容：

<div id = 'box' style = "color:red">测试Div<em>倾斜</em>结尾</div>

JavaScript内容：

（一）属性节点

1.父节点：

		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'
		}

2.子节点：

        //节点类型值:
            //元素节点为：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);				//返回文本节点的 文本
				}
			}
		}

      在做实验的过程中，发现在节点，成了一件不小的麻烦，所以做上面的总结。准确找到相应的节点，是操作的前提。内容如果较多，节点层次可能也会较多，逐层查找即可。