JS DOM节点

1.网页内容是是由节点组成的

分为:
(1)元素节点
(2)属性节点
(3)文本节点
(4)注释节点
(5)文档节点

节点三要素 :

1. 节点类型 : nodeType
2. 节点名称 : nodeName
3. 节点值 : nodeValue

获取子元素 : 父元素.children
谷歌火狐 : 获取到的是元素节点
IE8 : 获取的是 注释 元素

获取子节点 : 父元素.childNodes
谷歌火狐 : 文本(包含空文本) 注释 元素
IE8 : 非空文本 注释 元素

(1)元素节点

	// body部分
	<div id="box">我是个div盒子</div>
    <p id="pp">我是一个p标签</p>
    // js部分
	// 获取元素
    var box =document.getElementById("box");
    var pp =document.getElementById("pp");
	console.dir(box.nodeType);	// 1
 	console.dir(box.nodeName);  // DIV
	console.dir(box.nodeValue);	// NULL

(2)属性节点

	console.log(box.id);
	console.log(box.className); // 这个获取的是节点值  并不是属性节点
	// attribute  属性
    console.log(box.attributes); // 获取到的是元素属性的一个数组
    console.log(box.attributes[0].nodeType);   // 2
    console.log(box.attributes[0].nodeName);   // id
    console.log(box.attributes[0].nodeValue);  // box
    
	console.log(box.attributes[1].nodeType);   // 2
	console.log(box.attributes[1].nodeName);   // class
	console.log(box.attributes[1].nodeValue);  // div1

(3)文本节点

	// body部分
	<ul id="ul">
        <li>我是li标签1</li>44444
        <!-- 我是注释行 -->
        <li>我是li标签2</li>
        <li>我是li标签3</li>
        <li>我是li标签4</li>
        <li>我是li标签5</li>
    </ul>
	// js部分
	// 获取元素
	var ul = document.getElementById("ul");
	// 获取元素所有的子节点
    console.log(ul.childNodes);  
    //获取 元素所有的子节点(文本  注释  元素)
    // childNodes 获取子节点
    // 谷歌火狐 文本(包含空文本)  注释  元素
    //  IE8  非空文本   注释元素
      
    // 文本节点的三要素
    console.log(ul.childNodes[2].nodeType); // 3
    console.log(ul.childNodes[2].nodeName); // #text
    console.log(ul.childNodes[2].nodeValue); // 4444	

(4)注释节点

	// 注释节点的三要素
	console.log(ul.childNodes[3].nodeType); // 8
	console.log(ul.childNodes[3].nodeNaem); // #coment
	console.log(ul.childNodes[3].nodeValue); // 我是注释

(5)文档节点

	// 文档节点的三要素
	console.log(document.nodeType);  // 9
	console.log(document.nodeName);  // #document
	console.log(document.nodeValue);  // 我是注释