节点关系

---

节点关系

在HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

DOM对象属性

innerHTML   节点（元素）的文本值
parentNode  节点（元素）的父节点
childNodes  节点（元素）的子节点（firstChild：第一个子节点，lastChild：最后一个子节点）
attributes  节点（元素）的属性节点
nodeName    节点（元素）的名称，只读。（元素节点的 nodeName 与标签名相同，属性节点的 nodeName 与属性名相同，文本节点的 nodeName 始终是 #text，文档节点的 nodeName 始终是 #document）
nodeValue   节点（元素）的值（元素节点的 nodeValue 是 undefined 或 null，文本节点的 nodeValue 是文本本身，属性节点的 nodeValue 是属性值）
nodeType    节点（元素）的类型，只读。（元素：1，  属性：2，  文本：3，  注释：8，  文档：9）

1.nodeType

nodeType == 1 表示的是元素节点（标签） 。记住：在这里，元素就是标签。

nodeType == 2 表示是属性节点。

nodeType == 3 是文本节点。

<div id="box" value="2">
    你好你好
</div>

<script>
var element = document.getElementById("box1");  //获取元素节点（标签）
var attribute = element.getAttributeNode("id"); //获取box1的属性节点
var txt = element.firstChild;                   //获取box1的文本节点
var value = element.getAttribute("id");         //获取id的属性值

console.log(element);
console.log(attribute);
console.log(txt);
console.log(value);
</script>

获取 nodeType、nodeName、nodeValue

    //获取nodeType
    console.log(element.nodeType);       //1
    console.log(attribute.nodeType);     //2
    console.log(txt.nodeType);           //3

    //获取nodeName
    console.log(element.nodeName);       //DIV
    console.log(attribute.nodeName);     //id
    console.log(txt.nodeName);           //#text

    //获取nodeValue
    console.log(element.nodeValue);     //null
    console.log(attribute.nodeValue);   //box1
    console.log(txt.nodeValue);         //你好你好

DOM节点关系的获取

DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

1.获取父节点

调用者就是节点。一个节点只有一个父节点。

    节点.parentNode

2.获取兄弟节点

下一个节点 | 下一个元素节点(考虑兼容性)

	下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling

前一个节点 | 前一个元素节点

     前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling

获得任意一个兄弟节点

节点自己.parentNode.children[index]; 

3.获取单个的子节点

第一个子节点 | 第一个子元素节点

第一个子元素节点 = 节点.firstElementChild || 节点.firstChild

最后一个子节点 | 最后一个子元素节点

最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild

4.获取所有的子节点

children(用的最多)

• 返回的是指定元素的子元素节点的集合
• 它只返回HTML节点，甚至不返回文本节点

子节点数组 = 父节点.children;   //获取所有节点。用的最多。    

childrenNode

• 返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）

子节点数组 = 父节点.childNodes;   //获取所有节点。