前端生涯

DOM節點類型包括: 元素節點(element nodes)、文字節點(text nodes)、註解節點(comment nodes)

Node.nodeType

判斷節點類型

使用範例：

// true
document.nodeType === Node.DOCUMENT_NODE;

// true
document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE;

var p = document.createElement('p');
p.textContent = 'Once upon a time...';

// true
p.nodeType === Node.ELEMENT_NODE;
// true
p.firstChild.nodeType === Node.TEXT_NODE;

Node.nodeName

nodeName 屬性會返回節點的名稱。

使用範例：

<div id="d1">hello world</div>
<input id="t" type="text">

<script>
var div = document.getElementById('d1');
var text = document.getElementById('t');

// 顯示 "DIV"
alert(div.nodeName);

// 顯示 "INPUT"
alert(text.nodeName);
</script>

Node.childNodes

所有的 DOM 節點物件都有 childNodes 屬性，且此種屬性無法修改。
我們可以透過 Node.hasChildNodes() 來檢查某個 DOM 節點是否有子節點。
Node.childNodes 回傳的可能會有：元素節點、文字節點、註解節點
使用範例：

var node = document.querySelector('#hello');

// 如果 node 內有子元素
if( node.hasChildNodes() ) {

// 可以透過 node.childNodes[n] (n 為數字索引) 取得對應的節點
// 注意，NodeList 物件內容為即時更新的集合
for (var i = 0; i < node.childNodes[i].length; i++) {
// ...
};
}

Node.firstChild

Node.firstChild 可以取得 Node 節點的第一個子節點，如果沒有子節點則回傳 null。
 

Node.lastChild

Node.lastChild 可以取得 Node 節點的最後一個子節點，如果沒有子節點則回傳 null。
 

Node.parentNode

透過 Node.parentNode 可以用來取得父節點
 

Node.previousSibling

取得同層之間的「前一個」節點，如果 node 已經是第一個節點，則回傳 null。
 

Node.nextSibling

取得同層之間的「下一個」節點，如果 node 已經是最後一個節點，則回傳 null。

參考資料:
fooish、ithelp