JS 中DOM節點的訪問關係
節點的訪問關係，是以屬性的方式存在的。DOM的節點並不是孤立的，因此可以通過DOM節點之間的相對關係對它們進行訪問。
一、關係
1、父節點 parentNode
呼叫者就是節點。一個節點只有一個父節點。呼叫方式：節點.parentNode
2、兄弟節點
nextSibling
nextElementSibling
previousSibling
previousElementSibling
nextSibling：呼叫者是節點。IE678中指下一個元素節點（標籤）。在火狐谷歌IE9+以後都指的是下一個節點（包括空文件和換行節點）。
nextElementSibling：在火狐谷歌IE9都指的是下一個元素節點。
總結：在IE678中用nextSibling，在火狐谷歌IE9+以後用nextElementSibling
下一個兄弟節點=節點.nextElementSibling || 節點.nextSibling
previousSibling：呼叫者是節點。IE678中指前一個元素節點（標籤）。在火狐谷歌IE9+以後都指的是前一個節點（包括空文件和換行節點）。
previousElementSibling：在火狐谷歌IE9都指的是前一個元素節點。
總結：在IE678中用previousSibling，在火狐谷歌IE9+以後用previousElementSibling。
下一個兄弟節點=節點.previousElementSibling|| 節點.previousSibling
3、子節點
firstChild：呼叫者是父節點。IE678中指第一個子元素節點（標籤）。在火狐谷歌IE9+以後都指的是第一個節點（包括空文件和換行節點）。
firstElementChild:在火狐谷歌IE9都指的第一個元素節點。
第一個子節點=父節點.firstElementChild || 父節點.firstChild
lastChild:呼叫者是父節點。IE678中指最後一個子元素節點（標籤）。在火狐谷歌IE9+以後都指的是最後一個節點（包括空文件和換行節點）。
lastElementChild：在火狐谷歌IE9都指的最後一個元素節點。
第一個子節點=父節點.lastElementChild|| 父節點.lastChild
4、所有位元組點
childNodes
children
childNodes：它是標準屬性，它返回指定元素的子元素集合，包括HTML節點，所有屬性，文字節點 （
火狐谷歌等高本版會把換行也看做是子節點
nodeType==1時才是元素節點(標籤)
nodeType == 1 表示的是元素節點 記住 元素就是標籤
nodeType == 2 表示是屬性節點 瞭解
nodeType == 3 是文字節點 瞭解
子節點陣列 = 父節點.childNodes; 獲取所有節點。
children：非標準屬性，它返回指定元素的子元素集合。
但它只返回HTML節點，甚至不返回文字節點，雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支援。
children在IE6/7/8中包含註釋節點
在IE678中，註釋節點不要寫在裡面。
子節點陣列 = 父節點.children; 用的最多。
節點自己.parentNode.children[index];隨意得到兄弟節點。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不要的</title>
</head>
<body>
<div id="box1">
<div id="box2" ></div>
<div id="box3"></div>
<div dir="box4"></div>
<div dir="box5"></div>
</div>
<script type="text/javascript">
// 獲取 box2結點
var box2=document.getElementById('box2');
// 根據 parentNode 獲取 box1結點
var box1=box2.parentNode;
//兄弟節點 獲取下一個節點
var box3=box2.nextElementSibling;
console.log(box3);
//獲取box3上一個節點
var newbox2=box3.previousElementSibling;
console.log(newbox2);
//子節點
//獲取box1 第一個子節點
var firstbox=box1.firstElementChild;
console.log(firstbox);
//獲取 box2最後一個子節點
var lastbox=box1.lastElementChild;
console.log(lastbox);
//所有子節點
var allchild=box1.childNodes;
console.log('allchild='+allchild);
var all=box1.children;
console.log('all='+all);
</script>
</body>
</html>