javascript基礎——dom的學習

一、看完http://www.w3school.com.cn/htmldom/index.asp裏面的東西，梳理一下 ，方便下次複習。

二、只看文檔和示例卻不動手實驗，一般容易忘記，而且不是真的理解了。 因此最好的方式是邊看邊動手調試（使用chrome調試比較方便），看看在控制檯獲得的是什麼，從而加深對知識點的理解。

三、不查文檔是不現實的，可是每次什麼東西都查文檔，即便是很簡單的也查就很費時間，因此須要理解性的記憶 一些東西。 下面舉個例子說明一下，去理解知識點。

（1）在Eclipse裏面創建工程，輸入代碼，而後調試查看返回值；

（此處採用以下標籤做爲例子，而且省略了部分標籤）

（2）經過document對象，使用getElementById方法獲取的結果；

圖一（元素節點）：

（3）在http://www.w3school.com.cn/htmldom/dom_nodes.asp中定義的節點：

* 整個文檔是一個文檔節點（如圖二）

* 每一個 HTML 元素是元素節點（如圖一）

* HTML 元素內的文本是文本節點（如圖三）

* 每一個 HTML 屬性是屬性節點（如圖四）

* 註釋是註釋節點

因此剛纔咱們獲取到的是HTML元素節點；

圖二（文檔節點）：

（4）經過知道參數和返回值就能很快的掌握這個方法的使用，而且能在裏面找到幫助本身理解性的記憶的規律。

四、採用上面的方式，總括性的整理一下dom裏面有哪些經常使用對象和方法。

一些經常使用的 HTML DOM 方法：

getElementById(id) - 獲取帶有指定 id 的節點（元素）

appendChild(node) - 插入新的子節點（元素）

removeChild(node) - 刪除子節點（元素）

一些經常使用的 HTML DOM 屬性：

innerHTML - 節點（元素）的文本值（如圖三）

parentNode - 節點（元素）的父節點

childNodes - 節點（元素）的子節點

attributes - 節點（元素）的屬性節點（如圖四）

圖三（文本節點）：

圖四（屬性節點）：

仔細理解定義裏面的文字，再加上調試獲得的結果（如截圖，可是因爲不能每個屬性都截圖，因此只是舉例截圖）就相對容易記憶了。即便是最簡單的基礎也須要多思考。