Javascript 基礎(chǔ)教學(xué)之認(rèn)識(shí)DOM
什麼是DOM ？
文件物件模型DOM ?英文縮寫(xiě)：Document Object Model，定義存取和處理HTML文件的標(biāo)準(zhǔn)方法。 DOM 將HTML文件呈現(xiàn)為帶有元素、屬性和文字的樹(shù)狀結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）
#這個(gè)說(shuō)法很官方，大家肯定還是不明白。
舉個(gè)例子：我們有一段HTML，那麼如何存取第二層第一個(gè)節(jié)點(diǎn)呢，如何把最後一個(gè)節(jié)點(diǎn)移到第一個(gè)節(jié)點(diǎn)上面去呢？
DOM就是定義瞭如果做類似操作，那麼應(yīng)該怎麼做的標(biāo)準(zhǔn)。例如用getElementById來(lái)存取節(jié)點(diǎn)，用insertBefore來(lái)插入節(jié)點(diǎn)。
當(dāng)瀏覽器載入HTML時(shí)，會(huì)產(chǎn)生對(duì)應(yīng)的DOM樹(shù)。
簡(jiǎn)而言之，DOM可以理解為一個(gè)存取或操作HTML各種標(biāo)籤的實(shí)作標(biāo)準(zhǔn)。
對(duì)於一個(gè)HTML來(lái)說(shuō)，文檔節(jié)點(diǎn)Document（看不到的）是它的根節(jié)點(diǎn)，對(duì)應(yīng)的對(duì)象便是document對(duì)象（嚴(yán)格講是子類HTMLDocument對(duì)象，下面單獨(dú)介紹Document類型時(shí)會(huì)指出）。
換句話說(shuō)存在一個(gè)文檔節(jié)點(diǎn)Document，然後它有子節(jié)點(diǎn)，例如透過(guò)document.getElementsByTagName(“html”)，得到類型為元素節(jié)點(diǎn)的Element html。
每一段HTML標(biāo)記都可以用對(duì)應(yīng)的節(jié)點(diǎn)表示，例如：
HTML元素透過(guò)元素節(jié)點(diǎn)表示，註解透過(guò)註解節(jié)點(diǎn)表示，文件類型透過(guò)文件類型節(jié)點(diǎn)表示等。
總共定義了12種節(jié)點(diǎn)類型，而這些類型又都繼承自Node型別。
所以我們先講Node類型，因?yàn)檫@個(gè)類型的方法是所有節(jié)點(diǎn)都會(huì)繼承的。
?
如下程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM</title> </head> <body> <h2><a href="ipnx.cn">Javascript DOM</a></h2> <p>對(duì)html元素進(jìn)行操作，可添加，改變或移除css樣式等</p> <ul> <li>Javascript</li> <li>DOM</li> <li>css</li> </ul> </body> </html>
#將HTML程式碼分解為DOM節(jié)點(diǎn)層次圖:
HTML文件可以說(shuō)由節(jié)點(diǎn)構(gòu)成的集合，DOM節(jié)點(diǎn)有:
1. 元素節(jié)點(diǎn)：上圖<html>、<body>、<p>等都是元素節(jié)點(diǎn)，即標(biāo)籤。
2. 文字節(jié)點(diǎn):向使用者展示的內(nèi)容，如<li>...</li>中的JavaScript、DOM、CSS等文字。
3. 屬性節(jié)點(diǎn):元素屬性，如<a>標(biāo)籤的連結(jié)屬性href="http://ipnx.cn"。
例如上面程式碼中的a標(biāo)籤
a 標(biāo)籤-------元素節(jié)點(diǎn)
href="www. php.cn"--------屬性節(jié)點(diǎn)
javascript ?DOM ---------- 文字節(jié)點(diǎn)
