[Back To Basic] Javascript - DOM Navigation

HTML DOM是由節點(nodes)所組成。

節點(nodes)和節點(nodes)之間有階層關係(上下或平行)，可以用以下方法來切換節點。

• parentNode
• childNodes[nodenumber]
• firstChild
• lastChild
• nextSibling
• previousSibling

DOM Root Node

可以透過以下兩個方法來取得整個頁面的DOM

• document.body
• document.documentElement

屬性: nodeName

• 永遠是大寫
• 唯讀
• HTML元素(elements)節點的nodeName是標籤(tag)名稱
• HTML屬性(attributes)節點的nodeName是屬性(attributes)名稱
• 文字節點(text nodes)的nodeName永遠是 #text
• 文件節點(document nodes)的nodeName永遠是 #document

屬性: nodeValue 

• HTML元素(elements)節點的nodeValue是null
• 文字節點(text nodes)的nodeValue是自己本身
• HTML屬性(attributes)節點的nodeValue是屬性值

屬性: nodeType

會回傳目前節點的類型

• 1: HTML元素(elements)節點 / ELEMENT_NODE
• 2: HTML屬性(attributes)節點 / ATTRIBUTE_NODE
• 3: 文字節點(text nodes) / TEXT_NODE
• 8: 註解 / COMMENT_NODE
• 9: 文件節點(document nodes) / DOCUMENT_NODE
• 10: 文件型態節點 / DOCUMENT_TYPE_NODE

source code