f(sixleaves) = sixleaves

重劍無鋒大巧不工

:: 管理 ::

95 隨筆 :: 0 文章 :: 7 評論 :: 0 Trackbacks

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

所以我要介紹下什么是節點：
先來看下這張圖：

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

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

2014.07.09
03：43
于福州

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

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

相關文章: JS(04)圖片庫改進之書寫優秀的JS-DOM JS(03) Node節點屬性和事件之圖片庫 JS(02)-DOM介紹 JS(01)-JavaScript語法 (SQL總結精華)sixleaves之mysql之表的連接詳細總結

網站導航: 博客園 IT新聞 BlogJava 博問 Chat2DB 管理

f(sixleaves) = sixleaves

常用鏈接

留言簿

隨筆分類(117)

隨筆檔案(95)

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜