• 頂級物件 : 文件的物件 document
  * 元素: 頁面上所有的標籤 element
  * 節點: 頁面上所有的內容(標籤, 屬性, 文字(文字, 換行, 空格)) node
  * 根元素: html標籤
  *
  * 節點的屬性
  * .nodeType : 節點的型別 : 1–標籤 2-屬性 3-文字
  * .nodeName: 節點的名字: 大寫的標籤名字–>標籤節點 小寫的屬性名字—>屬性的節點
  * #text—> 文字的節點
  * .nodeValue: 節點的值 : null—>標籤節點 屬性的值—>屬性節點 文字的內容–>文字節點

//第一個子節點
console.log(u.firstChild); // 在ie8中 顯示的是第一個子元素
//第一個子元素
console.log(u.firstElementChild); // 在ie8中 不支援
//最後一個子節點
console.log(u.lastChild);// 在ie8中 顯示的是最後一個子元素
//最後一個子元素
console.log(u.lastElementChild);// 在ie8中 不支援

console.log("================================================")

//獲取前一個兄弟節點
console.log(u.previousSibling) ; //  在ie8中 顯示的是前一個兄弟元素
//獲取前一個兄弟元素
console.log(u.previousElementSibling);  //  在ie8中 不支援
//獲取後一個兄弟節點
console.log(u.nextSibling);  //  在ie8中 顯示的是後一個兄弟元素
//獲取後一個兄弟元素
console.log(u.nextElementSibling); //  在ie8中 不支援

/*
* 總結:  凡是獲取元素和節點, 在谷歌和火狐 都支援
*        從子節點和兄弟節點開始, 獲取節點的程式碼 在ie8中 得到的元素
*        獲取元素的程式碼, 得到的是undfined
 

小案例