久久久久久精品久久久久,久久久久久免费视频,热久久最新网站获取

JS(02)-DOM介紹

理論知識：
介紹一下DOM，所謂的DOM用英文來說就是DOCUMENT OBJECT MODEL，即文檔-對象-模型。什么意思呢。其實(shí)每一個網(wǎng)頁，就是一份HTML文檔，而HTML文檔是可以看成一棵樹的，這棵樹稱為節(jié)點(diǎn)樹，顧名思義，它是由節(jié)點(diǎn)（Node）構(gòu)成的。
而每一個節(jié)點(diǎn)其實(shí)對應(yīng)的又是一個對象，既然是對象，就可以擁有屬性，擁有方法。在進(jìn)一步想，在編程中，創(chuàng)建對象要分配內(nèi)存，所以一份HTML文檔，其背后是瀏覽器創(chuàng)建了一個DOM的節(jié)點(diǎn)樹，這些節(jié)點(diǎn)的關(guān)系通過指針實(shí)現(xiàn)，而每個節(jié)點(diǎn)即每個對象
在內(nèi)存中都占有一定空間。
一顆節(jié)點(diǎn)樹：

所以我要介紹下什么是節(jié)點(diǎn)：
先來看下這張圖：

Node是一個類，代表著節(jié)點(diǎn)類，其下有Document類，Element類。這兩個類是學(xué)習(xí)DOM的重點(diǎn)。
1.Document類代在瀏覽器中有個Document對象，就是document，它是全局性的。如果你看第一張圖，
會發(fā)現(xiàn)，document在整個文檔的根節(jié)點(diǎn)，。
2.Element類，代表的是元素節(jié)點(diǎn)，元素節(jié)點(diǎn)包括HTML元素節(jié)點(diǎn)中所有的元素都是元素節(jié)點(diǎn)。
3.Document于Element中的HTMLDocument、HTMLElement是不一樣的，Document和Element代表的是HTML/XML
文檔，而Element代表的是這些文檔的元素，而HTMLDocument、HTMLElement是進(jìn)一步的細(xì)分，他們代表的是
HTML文檔。

重點(diǎn)知識：
前面介紹的理論知識是為了這步做鋪墊的，我們通過上面可以知道，其實(shí)HTML文檔相當(dāng)于一份初始配置文檔，當(dāng)?shù)谝淮渭虞d時，瀏覽器把它創(chuàng)建為DOM節(jié)點(diǎn)樹保存在內(nèi)存中，而這以后顯示在瀏覽器上的東西，都是通過讀取DOM節(jié)點(diǎn)樹來實(shí)現(xiàn)的。
所以我們就要學(xué)習(xí)DOM節(jié)點(diǎn)樹提供給我們定位，獲取節(jié)點(diǎn)的接口，主要是通過Document對象的實(shí)例document中的三個方法。為什么是document對象呢？因為作為一棵樹，它是根節(jié)點(diǎn)，通過根節(jié)點(diǎn)我們可以搜索到所有節(jié)點(diǎn)（學(xué)過數(shù)據(jù)結(jié)構(gòu)的
應(yīng)該很容易理解）。
1.所以我們通過document中提供的三個方法：getElementById("XXX");getElementsByTag("XXX");getElementsByClassName("XXX");最后一個是HTML5中新提供的接口。前面兩個，分別是通過Id屬性，和標(biāo)簽獲取
指定的元素或者元素集合。
2.既然獲得了節(jié)點(diǎn)，我們可以通過節(jié)點(diǎn)這個對象所提供的方法來操作節(jié)點(diǎn)，說得形象點(diǎn)，我們獲取節(jié)點(diǎn)后，可以和節(jié)點(diǎn)對話，我們可以向節(jié)點(diǎn)發(fā)送消息，而消息會激發(fā)節(jié)點(diǎn)對象相應(yīng)的動作，具體的，我們可以發(fā)送getAttribute("XXX");消息來獲取節(jié)點(diǎn)對象屬性的值
我們還可以發(fā)送消息setAttribute(key,value);來設(shè)置指定節(jié)點(diǎn)屬性為key的值為value。

2014.07.09
03：43
于福州

posted on 2014-07-09 03:33 swp 閱讀(173) 評論(0) 編輯收藏引用所屬分類: Web

只有注冊用戶登錄后才能發(fā)表評論。
【推薦】100%開源！大型工業(yè)跨平臺軟件C++源碼提供，建模，組態(tài)！

相關(guān)文章: JS(04)圖片庫改進(jìn)之書寫優(yōu)秀的JS-DOM JS(03) Node節(jié)點(diǎn)屬性和事件之圖片庫 JS(02)-DOM介紹 JS(01)-JavaScript語法 (SQL總結(jié)精華)sixleaves之mysql之表的連接詳細(xì)總結(jié)

網(wǎng)站導(dǎo)航: 博客園 IT新聞 BlogJava 博問 Chat2DB 管理

f(sixleaves) = sixleaves

常用鏈接

留言簿

隨筆分類(117)

隨筆檔案(95)

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜