JavaScript高級（一）--HTML DOM

---恢復內容開始---

DOM（Document Object Model）文檔對象模型 

1、 HTML DOM的做用

  1.官方： HTML DOM 定義了全部 HTML 元素的對象和屬性，以及訪問它們的方法。換言之，HTML DOM 是關於如何獲取、修改、添加或刪除 HTML 元素的標準。

  2.自述： 在JavaScript中使用，DOM中的document來完成得到，操做，添加，刪除元素，內容，屬性的操做的一個工具。

2、DOM中的節點

   1.DOM是被視爲節點樹的HTML，咱們將HTML中全部事物視爲節點。整個HTML是一個節點，每一個元素是一個節點，每一個元素裏面的文本是一個節點，每一個元素的屬性是一個節點。節點樹以下圖所見。

            

      2. 節點的父，子，同胞，如同樹同樣，節點之間存在父子關係，同一個父節點直接爲同胞關係。且最上層的html爲根節點，除了根節點沒有父節點以外，全部節點都應該有父節點，但不必定有子節點。

3、DOM中的方法

     1.咱們在JavaScript中操做文檔中的對象都是經過DOM中的方法來完成，全部方法都來自於document類。

     2.得到節點的方法：（當返回值爲多個時，會生成一個Array對象，若是是單個則根據狀況來定）

             getElementById ：               根據id值返回元素

             getElementByName：          根據name值返回元素

             getElementByTagName：    根據標籤名值返回元素

             getElementByClassName： 根據class值返回元素

     3.增長刪除節點：

            appendChild() ：       添加節點

            removeChild() ：       刪除節點

            replaceChild() ：       替換節點

     4.新建節點：

            createTextNode()：    建立屬性節點

            createElement()：      建立元素節點

            createAttribute()：      建立文本節點

      5.屬性值：

            getAttribute()：  返回指定屬性值

            setAttribute()：  將指定屬性值修改

      6.write：

           輸出的一種方式之一，可是會直接覆蓋掉本來的html

4、屬性

     1.innerHTML：內部HTML，既能夠得到某元素內部值，也能夠用於賦值修改。

     2.nodeName，nodeTpye，nodeValue：能夠獲得name，type，value的值也能夠用於賦值修改。

5、事件

     1.事件能夠視爲觸發器，當某個條件成立時（可使鍵盤，鼠標等一列因素達成的條件），則觸發該方法的執行。

     2.onload與onunload，當用戶進入網頁和離開網頁是會觸發

     3.onchange,當節點被改變時則會觸發，能夠輸入框的提示

     4.onmouseover和onmouseout：當鼠標移動到，鼠標離開時會觸發

     5.onmousedown，onmouseup，onclick，hover當鼠標點擊，釋放時會觸發，click則是點擊，hover則是down和up結合，內置兩個function

     6.
     

---恢復內容結束---