[TOC]
# DOM的概念
  文檔對象模型（Document Object Model，簡稱DOM），是 **W3C** 組織推薦的處理 **可擴展標記語言**（html或xml文檔） 的標準 **編程接口**。它是一種與平臺和語言無關的 **API**，它可以動態操作HTML文檔，如 對html標簽作增刪改查操作。**DOM** 是一種基于樹的 API 文檔，在處理html文檔的過程中，DOM以對象的形式存儲在內存中。
  因為DOM是基于樹結構存儲在內存中的，所以DOM又稱為文檔樹模型，DOM的樹結構如下圖
**DOM中的幾個常用概念**
1.** 文檔**：一個網頁可以稱為文檔 ?
2. **節點**：網頁中的所有內容都是節點（標簽、屬性、文本、注釋等） ?
3. **元素**：網頁中的標簽 ?
4. **屬性**：標簽的屬性
**DOM經常進行的操作**
1. **獲取元素 ?**
2. **對元素進行操作(設置其屬性或調用其方法)**
3. **動態創建元素**
4. **事件(什么時機做相應的操作)**
<br>
## DOM方法-事件-屬性總結
>[info] DOM 文檔對象模型中，常用方法，事件，屬性的小結如下
> <br>
> 常用方法(獲取頁面標簽元素)
> getElementById(): 根據id獲取元素;
> getElementsByTagName(): 根據標簽名獲取元素;
> <br>
> 常用的事件
> onclick: 點擊事件
> onfocus: 獲得焦點事件
> onblur: 失去焦點事件
> onmouseover: 鼠標移入(經過)事件
> onmouseout: 鼠標移出事件
> <br>
> 常用的元素屬性
> 非表單元素屬性 href title src alt 等
> 表單元素屬性 type value checked disabled selected 等
> 公共屬性 id className style
> 樣式屬性
> className: 用于引用定義好的外部樣式,如嵌入式, 外聯式樣式;
> style: 用于設置行內內樣式, 行內樣式優先級比嵌入式, 外聯式的優先級高;
> <br>
> 自定義屬性操作(使用三個標準方法)
> setAttribute(): 根據指定的屬性名, 設置標簽行內屬性;
> getAttribute(): 根據指定的屬性名和值, 獲取標簽行內屬性. 參數一: 屬性名; 參數二: 屬性值;
> removeAttribute(): 根據指定的屬性名, 刪除標簽行內屬性;
常用DOM方法小結
>[info] createElement()、appendChild()、removeChild()、insertBefore()、replaceChild()，見**節點操作**一節。
>
> 1、var insertedNode = parentNode.insertBefore(newNode, referenceNode);
> 在當前節點中將newNode插入referenceNode之前。如果給定的子節點已存在當前文檔中，則insertBefore()會將其從當前位置移動到新位置;
> <br>
> 2、var replacedNode = parentNode.replaceChild(newChild, oldChild);
> 在當前節點中，用 newChild 替換 oldChild 并返回被替換掉的 oldChild;
> <br>
> 3、var childNode = parentNode.appendChild(childNode);
> 將指定的 childNode 參數作為最后一個子節點添加到當前節點，返回 childNode。如果參數引用了 DOM 樹上的現有節點，則節點將從當前位置分離，并附加到新位置;
>
DOM對象總結
>[info] 一、模擬DOM對象的結構
> ?
> 二、節點層級：父子節點、兄弟節點
> ? ?parentNode：獲取父節點
> ? ?childNodes：獲取所有子節點
> ? ?children：獲取子元素節點
> ? ?firstNode：獲取父元素中的第一個子節點
> ? ?firstElementNode：獲取父元素中的第一個子元素節點
> ? ?lastNode：獲取父元素中的最后一個子節點
> ? ?lastElementNode：獲取父元素中的最后一個子元素節點
> ?
> ? ?nextSibling：獲取下一個節點
> ? ?nextElementSibling：獲取下一個元素節點，存在瀏覽器兼容性問題
> ? ?previousSibling：獲取上一個節點
> ? ?previousElementSibling：獲取上一個元素節點，存在瀏覽器兼容性問題
> ?
> 三、動態創建元素三種方式
> ? ?document.write()：刷新文檔流，導致原來的元素丟失
> ? ?innerHTML：重新繪制DOM樹，效率較低
> ? ? ? ?可使用字符串拼接或數組輔助，最后一次性將組裝好的數據賦值給innerHTML
> ? ?document.createElement()：編碼清晰，效率高（推薦使用）
> ?
> ? ?需求：
> ? ?動態創建列表
> ? ?動態創建表格
> ?
> 四 、常用DOM元素操作的方法
> ? ?createElement(targetName)：根據指定的名字創建元素
> ? ?appendChild(node)：追加元素
> ? ?insertBefore(newNode，referenceNode)：在指定元素前插入新元素
> ? ?removeChild(node)：從父元素中移除指定元素
> ? ?replaceChild(newNode，oldNode)：替換指定元素
> ? ?注意：appendChild、insertBefore、replaceChild 操作頁面中已存在的元素時，會移動元素
> ?
> ? ?需求：
> ? ?選擇水果
> ? ?innerHTML全選的問題：事件丟失，內存泄漏
>
