1、DOM簡介

1.1、什么是DOM

文檔對象模型（Document Object Model，簡稱 DOM），是 W3C 組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口

W3C 已經(jīng)定義了一系列的 DOM 接口，通過這些 DOM 接口可以改變網(wǎng)頁的內(nèi)容、結構和樣式。

• 文檔：一個頁面就是一個文檔，DOM中使用doucument來表示

• 元素：頁面中的所有標簽都是元素，DOM中使用 element 表示

• 節(jié)點：網(wǎng)頁中的所有內(nèi)容都是節(jié)點（標簽，屬性，文本，注釋等），DOM中使用node表示

DOM 把以上內(nèi)容都看做是對象

2、獲取元素

2.1、如何獲取頁面元素

DOM在我們實際開發(fā)中主要用來操作元素。

我們?nèi)绾蝸慝@取頁面中的元素呢?

獲取頁面中的元素可以使用以下幾種方式:

• 根據(jù) ID 獲取

• 根據(jù)標簽名獲取

• 通過 HTML5 新增的方法獲取

• 特殊元素獲取

2.2、根據(jù)ID獲取

使用?getElementByld()?方法可以獲取帶ID的元素對象

使用?console.dir()?可以打印我們獲取的元素對象，更好的查看對象里面的屬性和方法。

示例

2.3、根據(jù)標簽名獲取

根據(jù)標簽名獲取，使用?getElementByTagName()?方法可以返回帶有指定標簽名的對象的集合

• 因為得到的是一個對象的集合，所以我們想要操作里面的元素就需要遍歷

• 得到元素對象是動態(tài)的

• 返回的是獲取過來元素對象的集合，以偽數(shù)組的形式存儲

• 如果獲取不到元素，則返回為空的偽數(shù)組(因為獲取不到對象)

2.4、根據(jù)標簽名獲取

還可以根據(jù)標簽名獲取某個元素（父元素）內(nèi)部所有指定標簽名的子元素,獲取的時候不包括父元素自己

注意：父元素必須是單個對象(必須指明是哪一個元素對象)，獲取的時候不包括父元素自己

2.5、獲取特殊元素

①獲取body元素

返回body元素對象

②獲取html元素

返回html元素對象

3、事件基礎

3.1、事件概述

JavaScript 使我們有能力創(chuàng)建動態(tài)頁面，而事件是可以被 JavaScript 偵測到的行為。

簡單理解： 觸發(fā)— 響應機制。

網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 的事件，例如，我們可以在用戶點擊某按鈕時產(chǎn)生一個事件，然后去執(zhí)行某些操作。

3.2、事件三要素

1. 事件源(誰)

2. 事件類型(什么事件)

3. 事件處理程序(做啥)

3.3、執(zhí)行事件的步驟

1. 獲取事件源

2. 注冊事件(綁定事件)

3. 添加事件處理程序(采取函數(shù)賦值形式)

3.4、鼠標事件

4、操作元素

JavaScript 的 DOM 操作可以改變網(wǎng)頁內(nèi)容、結構和樣式，我們可以利用 DOM 操作元素來改變元素里面的內(nèi)容 、屬性等。注意以下都是屬性

4.1、改變元素內(nèi)容

從起始位置到終止位置的內(nèi)容，但它去除html標簽，同時空格和換行也會去掉。

起始位置到終止位置的全部內(nèi)容，包括HTML標簽，同時保留空格和換行

4.2、改變元素屬性

4.3、改變樣式屬性

我們可以通過 JS 修改元素的大小、顏色、位置等樣式。

• 行內(nèi)樣式操作

• 類名樣式操作

注意：

1.JS里面的樣式采取駝峰命名法，比如 fontSize ，backgroundColor

2.JS 修改 style 樣式操作 ，產(chǎn)生的是行內(nèi)樣式，CSS權重比較高

3.如果樣式修改較多，可以采取操作類名方式更改元素樣式

4.class 因為是個保留字，因此使用className來操作元素類名屬性

5.className 會直接更改元素的類名，會覆蓋原先的類名

4.5、排他思想

如果有同一組元素，我們相要某一個元素實現(xiàn)某種樣式，需要用到循環(huán)的排他思想算法：

1. 所有元素全部清除樣式（干掉其他人）

2. 給當前元素設置樣式 （留下我自己）

3. 注意順序不能顛倒，首先干掉其他人，再設置自己

4.6、自定義屬性

4.6.1、獲取屬性值

• 獲取內(nèi)置屬性值(元素本身自帶的屬性)

• 獲取自定義的屬性

4.6.2、設置屬性值

• 設置內(nèi)置屬性值

• 主要設置自定義的屬性

4.6.3、移除屬性

5、節(jié)點的常用屬性和方法

節(jié)點就是標簽對象

方法： 通過具體的元素節(jié)點調(diào)用?

getElementsByTagName() 方法，獲取當前節(jié)點的指定標簽名孩子節(jié)點?

appendChild( oChildNode ) 方法，可以添加一個子節(jié)點，oChildNode 是要添加的孩子節(jié)點

屬性：

childNodes 屬性，獲取當前節(jié)點的所有子節(jié)點?

firstChild 屬性，獲取當前節(jié)點的第一個子節(jié)點?

lastChild 屬性，獲取當前節(jié)點的最后一個子節(jié)點?

parentNode 屬性，獲取當前節(jié)點的父節(jié)點?

nextSibling 屬性，獲取當前節(jié)點的下一個節(jié)點?

previousSibling 屬性，獲取當前節(jié)點的上一個節(jié)點?

className 用于獲取或設置標簽的class 屬性值?

innerHTML 屬性，表示獲取/設置起始標簽和結束標簽中的內(nèi)容?

innerText 屬性，表示獲取/設置起始標簽和結束標簽中的文本

練習：DOM 查詢練習