文檔物件模型(DOM)
DOM的官方定義
#DOM , Document Object Model ,文件物件模型。我們可以把網(wǎng)頁(yè)中的所有「東西」看成是「物件」。
DOM是W3C所製定的網(wǎng)頁(yè)標(biāo)準(zhǔn)或規(guī)則,而這個(gè)標(biāo)準(zhǔn),在瀏覽器中,以「物件」的形式得以實(shí)現(xiàn)。
DOM的官方定義:DOM可以讓腳本,動(dòng)態(tài)的存取或操作,網(wǎng)頁(yè)的內(nèi)容、網(wǎng)頁(yè)外觀、網(wǎng)頁(yè)結(jié)構(gòu)。
#DOM的分類
#核心DOM:提供了同時(shí)操作HTML文件和XML文件的公共的屬性和方法。
HTML DOM:針對(duì)HTML文件提供的專用的屬性方法。
XML DOM:針對(duì)XML文件提供的專用的屬性和方法。
CSS DOM:提供了操作CSS的屬性和方法。
Event DOM:事件物件模型。如: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)頁(yè),不代表任何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)。