文檔對(duì)象模型(DOM)
DOM的官方定義
DOM , Document Object Model ,文檔對(duì)象模型。我們可以把網(wǎng)頁中的所有“東西”看成是“對(duì)象”。
DOM是W3C制定的網(wǎng)頁標(biāo)準(zhǔn)或規(guī)則,而這個(gè)標(biāo)準(zhǔn),在瀏覽器中,以“對(duì)象”的形式得以實(shí)現(xiàn)。
DOM的官方定義:DOM可以使腳本,動(dòng)態(tài)的訪問或操作,網(wǎng)頁的內(nèi)容、網(wǎng)頁外觀、網(wǎng)頁結(jié)構(gòu)。
DOM的分類
核心DOM:提供了同時(shí)操作HTML文檔和XML文檔的公共的屬性和方法。
HTML DOM:針對(duì)HTML文檔提供的專用的屬性方法。
XML DOM:針對(duì)XML文檔提供的專用的屬性和方法。
CSS DOM:提供了操作CSS的屬性和方法。
Event DOM:事件對(duì)象模型。如:onclick、 onload等。
HTML節(jié)點(diǎn)樹
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> </head> <body > <!-- 在HTML中,稱為“標(biāo)簽” 在DOM中,稱為“節(jié)點(diǎn)” 在JS中,稱為“對(duì)象” --> <table> <tr> <td>北京市</td> <td>上海市</td> <td>深圳市</td> </tr> </table> </body> </html>
節(jié)點(diǎn)關(guān)系
根節(jié)點(diǎn),一個(gè)HTML文檔只有一個(gè)根,它就是HTML節(jié)點(diǎn)。
子節(jié)點(diǎn):某一個(gè)節(jié)點(diǎn)的下級(jí)節(jié)點(diǎn)。
父節(jié)點(diǎn):某一個(gè)節(jié)點(diǎn)的上級(jí)節(jié)點(diǎn)。
兄弟節(jié)點(diǎn):兩個(gè)子節(jié)點(diǎn)同屬于一個(gè)父節(jié)點(diǎn)。
DOM中節(jié)點(diǎn)類型
document文檔節(jié)點(diǎn),代表整個(gè)網(wǎng)頁,不代表任何HTML標(biāo)記。但它是html節(jié)點(diǎn)的父節(jié)點(diǎn)。
element元素節(jié)點(diǎn),指任何HTML標(biāo)記。每一個(gè)HTML標(biāo)記就稱一個(gè)“元素節(jié)點(diǎn)”。它可以有文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)。
attribute屬性節(jié)點(diǎn)。指HTML標(biāo)記的屬性。
text節(jié)點(diǎn)。是節(jié)點(diǎn)樹的最底節(jié)點(diǎn)。