概念

文檔對象模型（Document Object Model，簡稱 DOM）如输，是 W3C 組織推薦的處理可擴展標記語言的標準編程接口。它是一種與平臺和語言無關(guān)的應用程序接口(API),它可以動態(tài)地 訪問程序和腳本央勒，更新其內(nèi)容不见、結(jié)構(gòu)和 www 文檔的風格(目前，HTML 和 XML 文檔是通過 說明部分定義的)崔步。文檔可以進一步被處理稳吮，處理的結(jié)果可以加入到當前的頁面。DOM 是一 種基于樹的 API 文檔井濒，它要求在處理過程中整個文檔都表示在存儲器中灶似。

DOM 樹

DOM 又稱為文檔樹模型。文檔：一個網(wǎng)頁可以稱為文檔瑞你。節(jié)點：網(wǎng)頁中的所有內(nèi)容都是節(jié)點 （標簽酪惭、屬性、文本者甲、注釋等）春感，元素：網(wǎng)頁中的標簽，屬性：標簽的屬性过牙。

獲取頁面元素

我們想要操作頁面上的某部分(顯示/隱藏甥厦，動畫)，需要先獲取到該部分對應的元素寇钉，才能進行后續(xù)操作刀疙。

1.根據(jù) id 獲取元素

• 方法：調(diào)用 document 對象的 getElementById 方法。
• 參數(shù)：字符串類型的 id 的屬性值扫倡。
• 返回值：對應 id 名的元素對象谦秧。

注意1：由于 id 名具有唯一性，部分瀏覽器支持直接使用 id 名訪問元素撵溃，但不是標準方式疚鲤， 不推薦使用。
注意2：代碼執(zhí)行順序缘挑，如果 js 在 html 結(jié)構(gòu)之前集歇，會導致結(jié)構(gòu)未加載，不能獲取對應id的元素语淘。

2.根據(jù)標簽名獲取元素

• 方法：調(diào)用 document 對象的 getElementsByTagName 方法诲宇。
• 參數(shù)：字符串類型的標簽名际歼。
• 返回值：同名的元素對象組成的數(shù)組。

注意1：操作數(shù)據(jù)時需要按照操作數(shù)組的方法進行姑蓝。
注意2：getElementsByTagName 方法內(nèi)部獲取的元素是動態(tài)增加的鹅心，在HTML結(jié)構(gòu)之前使用會生成空數(shù)組，并在結(jié)構(gòu)加載過程中動態(tài)增加對應的元素纺荧。

元素對象內(nèi)部獲取標簽元素：獲取的元素對象內(nèi)部旭愧，本身也可以調(diào)用根據(jù)標簽獲取元素方法，例如 div 元素對象也可以調(diào)用 getElementsByTagName 方法宙暇。目的是縮小選擇元素的范圍输枯，類似 css 中的后代選擇器。

3.根據(jù) name 獲取元素

• 方法：調(diào)用 document 對象的 getElementsByName 方法客给。
• 參數(shù)：字符串類型的 name 屬性值用押。
• 返回值：name 屬性值相同的元素對象組成的數(shù)組肢簿。

不建議使用：也是動態(tài)獲取元素靶剑，在 IE 和 Opera 中有兼容問題，會多選中 id 屬性值相同的元素池充。

4.根據(jù)類名獲取元素

• 方法：調(diào)用 document 對象的 getElementsByClassName 方法桩引。
• 參數(shù)：字符串類型的 class 屬性值。
• 返回值：class 屬性值相同的元素對象組成的數(shù)組收夸。

瀏覽器兼容問題：也是動態(tài)獲取元素坑匠，并且不支持 IE8 及以下的瀏覽器

5.根據(jù)選擇器獲取元素

• 方法1：調(diào)用 document 對象的 querySelector 方法，通過 css 中的選擇器去選取第一個 符合條件的標簽元素卧惜。 document.querySelector("#id .class")
• 方法2：調(diào)用 document 對象的 querySelectorAll 方法厘灼，通過 css 中的選擇器去選取所 有符合條件的標簽元素。
• 參數(shù)：字符串類型的 css 中的選擇器咽瓷。

瀏覽器兼容問題：在 html 結(jié)構(gòu)之前设凹，會導致結(jié)構(gòu)未加載，不能獲取對應的元素茅姜，并且不支持 IE8 以下的瀏覽器闪朱。

事件

事件：在什么時候做什么事。執(zhí)行機制：觸發(fā)--響應機制钻洒。

綁定事件(注冊事件)三要素：
1奋姿、事件源：給誰綁定事件；
2素标、事件類型：綁定什么類型的事件称诗，如：click 單擊；
3头遭、事件函數(shù)：事件發(fā)生后執(zhí)行什么內(nèi)容寓免，寫在函數(shù)內(nèi)部退腥。

事件監(jiān)聽：JavaScript 解析器會給有綁定事件的元素添加一個監(jiān)聽，解析器會一直監(jiān)測這個元素再榄，只要觸發(fā)對應的綁定事件狡刘，會立刻執(zhí)行事件函數(shù)。

常用事件監(jiān)聽方法：

1. 綁定 HTML 元素屬性

<input type="button" id="btn" value="點擊有驚喜" onclick="alert('點我做什么困鸥？')">

2. 綁定 DOM 對象屬性

<input type="button" id="btn" value="點擊有驚喜">
<script>
    // 獲取元素
    var btn = document.getElementById("btn");
    // 添加綁定事件
    btn.onclick = function () {
        // 定義的是事件被觸發(fā)后要做的事情
        alert("點我干嘛嗅蔬？");
    };
</script>

常用的鼠標事件類型：

元素屬性操作

非表單元素屬性

例如：href、title疾就、id澜术、src 等。
調(diào)用方式：元素對象打點調(diào)用屬性名猬腰，例如 obj.href鸟废。

注意：部分的屬性名跟關(guān)鍵字和保留字沖突，會更換寫法姑荷。
class → className
for → htmlFor
rowspan → rowSpan

屬性賦值：給元素屬性賦值,等號右側(cè)的賦值都是字符串格式盒延。

獲取標簽內(nèi)部內(nèi)容屬性

獲取標簽內(nèi)部內(nèi)容的屬性有兩個：innerHTML 和 innerText

• innerHTML屬性，在獲取標簽內(nèi)部內(nèi)容時鼠冕，如果包含標簽添寺，獲取的內(nèi)容會包含標簽，包括空白換行等懈费。
• innerText屬性计露，在獲取標簽內(nèi)部內(nèi)容時，如果包含標簽憎乙，獲取的內(nèi)容會過濾標簽票罐，并且會去掉換行和縮進等空白。

還可以通過兩個屬性給雙標簽內(nèi)部去更改內(nèi)容：

• innerHTML 設(shè)置屬性值泞边，有標簽的字符串该押，會按照 HTML 語法中的標簽加載。
• innerText 設(shè)置屬性值繁堡，有標簽的字符串沈善，會按照普通的字符加載。

對比使用場景：

• innerText：在設(shè)置純字符串時使用椭蹄。
• innerHTML：在設(shè)置有內(nèi)部子標簽結(jié)構(gòu)時使用闻牡。

表單元素屬性

• value 用于大部分表單元素的內(nèi)容獲取(option除外)
• type 可以獲取input標簽的類型(輸入框或復選框等)
• disabled 禁用屬性
• checked 復選框選中屬性
• selected 下拉菜單選中屬性

注意：在 DOM 中元素對象的屬性值只有一個時，會被轉(zhuǎn)成布爾值顯示绳矩。 例如：txt.disabled = true;

自定義屬性操作

• getAttribute(name) 獲取標簽行內(nèi)屬性
• setAttribute(name罩润，value) 設(shè)置標簽行內(nèi)屬性
• removeAttribute(name) 移除標簽行內(nèi)屬性

與element.屬性的區(qū)別: 上述三個方法用于獲取任意的行內(nèi)屬性，包括自定義的屬性翼馆。
注意：上述方法獲取屬性是通過字符串進行匹配割以，因此或者自有屬性是不需要修改屬性名金度。例如：getAttribute("class")

style 樣式屬性操作

• 使用 style 屬性方式設(shè)置的樣式顯示在標簽行內(nèi)。
• element.style 屬性的值严沥，是所有行內(nèi)樣式組成的一個樣式對象猜极。
• 樣式對象可以繼續(xù)點語法調(diào)用或更改 css 的行內(nèi)樣式屬性，例如 width消玄、height 等屬性跟伏。

注意1：類似 background-color 這種復合屬性的單一屬性寫法，是由多個單詞組成的翩瓜，要修改為駝峰命名方式書寫 backgroundColor受扳。
注意2：通過樣式屬性設(shè)置寬高、位置的屬性類型是字符串兔跌，需要加上 px 等單位勘高。

className 類名屬性操作

修改元素的 className 屬性相當于直接修改標簽的類名。如果需要修改多條 css 樣式坟桅，可以提前將修改后的樣式設(shè)置到一個類選擇器中华望，后續(xù)通過修改類名的方式，批量修改 css 樣式桦卒。

在實際工作中立美，如果需要設(shè)置的屬性值較多時，推薦使用 className 類名屬性操作方灾，如果需要設(shè)置或者修改的屬性只有一兩條，那么推薦使用style樣式屬性操作碌更。

節(jié)點操作

節(jié)點屬性

nodeType 節(jié)點的類型裕偿，屬性值為數(shù)字，表示不同的節(jié)點類型痛单，共 12 種嘿棘，只讀。
1：元素節(jié)點旭绒；2： 屬性節(jié)點鸟妙； 3： 文本節(jié)點。
nodeName 節(jié)點的名稱(標簽名稱)挥吵，只讀重父。
nodeValue 節(jié)點值，返回或設(shè)置當前節(jié)點的值忽匈，元素節(jié)點的 nodeValue 始終是 null房午。

父子節(jié)點常用屬性

兄弟節(jié)點常用屬性

注意：nextElementSibling 和 previousElementSibling 有兼容性問題谭企，IE9以后才支持廓译。

常用節(jié)點操作方法

創(chuàng)建節(jié)點：

• document.createElement("div") 創(chuàng)建元素節(jié)點
• document.createAttribute("id") 創(chuàng)建屬性節(jié)點
• document.createTextNode("hello") 創(chuàng)建文本節(jié)點

一般將創(chuàng)建的新節(jié)點存在變量中，方便使用债查。

添加非区、替換、插入攀操、刪除：

• parentNode.appendChild(child)：將一個節(jié)點添加到指定父節(jié)點的子節(jié)點列表末尾院仿。
• parentNode.replaceChild(newChild, oldChild)：用指定的節(jié)點替換當前節(jié)點的一個子節(jié)點，并返回被替換掉的節(jié)點。
• parentNode.insertBefore(newNode, referenceNode)：在參考節(jié)點之前插入一個擁有指定父節(jié)點的子節(jié)點歹垫，referenceNode 必須設(shè)置剥汤，如果 referenceElement 為 null 則 newNode 將被插入到子節(jié)點的末尾。
• parentNode.removeChild(child)：移除當前節(jié)點的一個子節(jié)點排惨。這個子節(jié)點必須存在于當前節(jié)點中吭敢。

克隆：

• Node.cloneNode()：克隆一個節(jié)點暮芭，并且可以選擇是否克隆這個節(jié)點下的所有內(nèi)容鹿驼。參數(shù)為 Boolean 布爾值，表示是否采用深度克隆,如果為 true辕宏，則該節(jié)點的所有后代節(jié)點也都會被克隆,如果為 false,則只克隆該節(jié)點本身畜晰，默認值為 true，節(jié)點下的內(nèi)容會被克隆瑞筐。

注意：克隆時凄鼻，標簽上的屬性和屬性值也會被復制，寫在標簽行內(nèi)的綁定事件可以被復制聚假， 但是通過JavaScript 動態(tài)綁定的事件不會被復制块蚌。

判斷方法：

• Node.hasChildNodes()：沒有參數(shù)，返回一個 Boolean 布爾值膘格，來表示該元素是否包含有 子節(jié)點峭范。
• Node.contains(child)：返回一個 Boolean 布爾值，來表示傳入的節(jié)點是否為該節(jié)點的后 代節(jié)點

有三種方法可以判斷當前節(jié)點是否有子節(jié)點瘪贱。

• node.firstChild !== null
• node.childNodes.length > 0
• node.hasChildNodes()

事件操作

注冊事件的其他方法

1. element.addEventListener() 方法纱控。
   參數(shù)：
   第一個參數(shù)：事件類型的字符串（onclick事件直接書寫”click”，不需要加 on）
   第二個參數(shù)：事件函數(shù)
   同一個元素可以多次綁定事件監(jiān)聽政敢，同一個事件類型可以注冊多個事件函數(shù)
   兼容性問題：不支持 IE9 以下的瀏覽器
2. element.attachEvent() 方法其徙。
   參數(shù)：
   第一個參數(shù)：事件類型的字符串（onclick事件需要加 on）
   第二個參數(shù)：事件函數(shù)
   同一個元素可以多次綁定事件監(jiān)聽，同一個事件類型可以注冊多個事件函數(shù)
   兼容性問題：只支持 IE10 及以下的瀏覽器喷户，但是在 IE8 及以下的瀏覽器會出現(xiàn)事件隊列順序錯亂。
3. 兼容寫法
   自定義一個注冊事件函數(shù)访锻；
   參數(shù)：事件源褪尝，事件類型（不加 on），事件函數(shù)
   IE9 及以上的瀏覽器期犬，使用 addEventListener 方法
   IE9 以下的瀏覽器河哑，使用 attachEvent 方法
   判斷瀏覽器時，不需要判斷它的版本龟虎，可以檢測瀏覽器能力（瀏覽器能力檢測：將某個方法的調(diào)用作為 if 語句的判斷條件璃谨，如果瀏覽器認識該方法返回 true，否則返回false）

 function addEvent(element,type,fun) {
      // IE 9 及以上的瀏覽器和其他瀏覽器，使用 addEventListener 方法
      // IE 9 以下的瀏覽器佳吞，使用 attachEvent 方法
      // 瀏覽器能力檢測
      if (element.addEventListener) {
        element.addEventListener(type, fun);
      } else if (ele.attachEvent) {
        element.attachEvent("on" + type, fun);
      }
    }

解除事件綁定

1. element.removeEventListener() 方法拱雏。
   參數(shù)：
   第一個參數(shù)：事件類型的字符串（直接書寫”click”，不需要加 on）
   第二個參數(shù)：事件函數(shù)引用名
   注意：沒有辦法移除一個匿名函數(shù)底扳，所以在注冊事件時需要單獨聲明一個有函數(shù)名的事件函數(shù)铸抑。
   兼容性問題：不支持 IE9 以下的瀏覽器
2. element.detachEvent() 方法。
   參數(shù)：
   第一個參數(shù)：事件類型的字符串（需要加 on）
   第二個參數(shù)：事件函數(shù)
   注意：沒有辦法移除一個匿名函數(shù)衷模，所以在注冊事件時需要單獨聲明一個有函數(shù)名的事件函數(shù)鹊汛。
   兼容性問題：只支持 IE10 及以下的瀏覽器
3. 兼容寫法
   自定義一個移除事件函數(shù)
   參數(shù)：事件源，事件類型（不加 on）阱冶，事件函數(shù)
   IE9 及以上的瀏覽器刁憋，使用 removeEventListener 方法
   IE9 以下的瀏覽器，使用 detachEvent 方法
   建議：將自己封裝的一些常用函數(shù)和方法木蹬，放到一個單獨的 .js 文件中至耻。

 function removeEvent(element,type,fun) {
      // IE 9 及以上的瀏覽器和其他瀏覽器，使用 removeEventListener 方法
      // IE 9 以下的瀏覽器届囚，使用 detachEvent 方法
      // 瀏覽器能力檢測
      if (element.removeEventListener) {
        element.removeEventListener(type, fun);
      } else if (element.detachEvent) {
        element.detachEvent("on" + type, fun);
      }
    }

事件流

祖先級與目標元素之間綁定了相同的事件有梆，觸發(fā)事件時程序有兩種可能的執(zhí)行方向。

事件委托：利用事件冒泡夸溶，將子級的事件委托給父級加載，同時凶硅，需要利用事件函數(shù)的一個 e 參數(shù)缝裁，該參數(shù)內(nèi)部存儲的是事件對象，通過 e.target 屬性獲取真正觸發(fā)事件的事件源足绅。

事件對象

只要觸發(fā)事件捷绑，就會有一個對象，內(nèi)部存儲了與事件相關(guān)的數(shù)據(jù)氢妈。
e 在低版本瀏覽器中有兼容問題粹污，低版本瀏覽器使用的是 window.event
兼容寫法：e = e || window.event
事件對象常用的屬性：

其他事件類型可以參考【事件參考 | MDN (mozilla.org)】

特效制作相關(guān)屬性

偏移量屬性

客戶端大小

滾動偏移屬性