目錄

創(chuàng)新互聯(lián)建站專業(yè)提供成都主機托管四川主機托管成都服務器托管四川服務器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價格，機房位于中國電信/網(wǎng)通/移動機房，德陽服務器托管服務有保障！

1.1? Dom簡介

1.2 Dom樹

DOM樹 又稱為文檔樹模型，把文檔映射成樹形結構，通過節(jié)點對象對其處理，處理的結果可以加入到當前的頁面

2? ?獲取元素

2.1? 根據(jù)ID獲取元素

語法：document.getElementById(id)

2.2? 根據(jù)標簽名獲取元素

2.3? 其他方式獲取元素?

2.4? 獲取特殊元素

3? 事件基礎

3.1 事件基礎

3.2? 事件三要素? （重點）

3.3? 事件執(zhí)行步驟

獲取事件源

3.4? 鼠標事件

4? 操作元素

4.1? 操作元素內(nèi)容

element.innerText：從起始位置到終止位置的內(nèi)容，會去除html標簽，同是空格和換行也會去掉

4.2 屬性操作

4.3? 表單元素屬性操作

4.4? ?樣式屬性操作

4.5? 排他思想

---

1.1? Dom簡介

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

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

1.2 Dom樹 DOM樹 又稱為文檔樹模型，把文檔映射成樹形結構，通過節(jié)點對象對其處理，處理的結果可以加入到當前的頁面

• 文檔：一個頁面就是一個文檔，表示的是整個 html文檔，DOM中使用document表示

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

• 標簽節(jié)點：表示的是 html 中的標簽，又叫元素節(jié)點，簡稱元素，用element表示

• 屬性節(jié)點，表示的是 html 標簽中的屬性

• 文本節(jié)點，表示的是 html 標簽中的內(nèi)容文本

• 注釋節(jié)點，表示的是 html 文檔中的注釋

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

2? ?獲取元素 2.1? 根據(jù)ID獲取元素

1. 語法：document.getElementById(id)

2. 作用：根據(jù)ID獲取元素對象

3. 參數(shù)：id值，區(qū)分大小寫的字符串

4. 返回值：元素對象 或 null

2.2? 根據(jù)標簽名獲取元素

1. 語法：document.getElementsByTagName('標簽名')

2. 作用：根據(jù)標簽名獲取元素對象

3. 參數(shù)：標簽名

4. 返回值：元素對象集合（偽數(shù)組，數(shù)組元素是元素對象）

2.3? 其他方式獲取元素?

1. 根據(jù)類名返回元素對象集合：document.getElementsByClassName('類名');

2. 根據(jù)指定選擇器返回第一個元素對象：document.querySelector('選擇器');? ?（比價常用）

3. 根據(jù)指定選擇器返回：document.querySelectorAll('選擇器');??

   注意：querySelector和querySelectorAll選擇器需要加符號,如：document.querySelector('#id')

2.4? 獲取特殊元素

1. 獲取body元素：document.body

2. 獲取html元素：document.documentElement

3? 事件基礎 3.1 事件基礎

1. 事件是可以被 JavaScript 偵測到的行為。

2. 例如，我們可以在用戶點擊某按鈕時產(chǎn)生一個事件，然后去執(zhí)行某些操作。

3.2? 事件三要素? （重點）

• 事件源（誰）：觸發(fā)事件的元素

• 事件類型（什么事件）： 例如 click 點擊事件

• 事件處理程序（做啥）：事件觸發(fā)后要執(zhí)行的代碼(函數(shù)形式)，事件處理函數(shù)

3.3? 事件執(zhí)行步驟

1. 獲取事件源

2. 注冊事件

3. 添加事件處理程序 (函數(shù))

3.4? 鼠標事件

鼠標事件	觸發(fā)條件
onclick	鼠標點擊左鍵觸發(fā)
onmouseover	鼠標經(jīng)過觸發(fā)
onmouseout	鼠標離開觸發(fā)
onmousemove	鼠標點擊移動觸發(fā)
onmouseup	鼠標抬起觸發(fā)
onmousedown	鼠標按下觸發(fā)
onfocus	獲得鼠標焦點觸發(fā)
onblur	失去鼠標焦點觸發(fā)

4? 操作元素 4.1? 操作元素內(nèi)容

1. element.innerText：從起始位置到終止位置的內(nèi)容，會去除html標簽，同是空格和換行也會去掉

2. element.innerHTML：從起始位置到終止位置的全部內(nèi)容，包括html標簽，同是保留空格和換行

innerText和innerHTML的區(qū)別

1. 獲取內(nèi)容時的區(qū)別：

   1. innerText會去除空格和換行，而innerHTML會保留空格和換行

2. 設置內(nèi)容時的區(qū)別：

   1. innerText不會識別html，而innerHTML會識別

4.2 屬性操作

1. src

2. href

3. id

4. alt

5. title

語法：

1. 獲取屬性值

   元素對象.屬性名

2. 設置屬性值

   元素對象.屬性名 = 值

4.3? 表單元素屬性操作

1. type

2. value

3. checked

4. selected

5. disabled

語法：

1. 獲取屬性的值

   1. 元素對象.屬性名

2. 設置屬性的值

   1. 元素對象.屬性名 = 值

   2. 表單元素中有一些屬性如：disabled、checked、selected，這些屬性值是布爾類型

4.4? ?樣式屬性操作

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

1. 常用方式

   1. 行內(nèi)樣式操作：element.style

   2. 類名樣式操作：element.className

2. 操作style屬性

   1. 語法：元素對象.style.樣式屬性 = 值;

3.? ? ?操作className屬性

1. 語法：元素對象.className = 值;

注意：

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

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

4.5? 排他思想

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

1. 所有元素全部清除樣式（一定要先 干掉所有人）

2. 給當前元素設置樣式 （最后 復活自己）

你是否還在尋找穩(wěn)定的海外服務器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機房具備T級流量清洗系統(tǒng)配攻擊溯源，準確流量調(diào)度確保服務器高可用性，企業(yè)級服務器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

網(wǎng)站題目：Dom基礎-創(chuàng)新互聯(lián)
鏈接地址：http://weahome.cn/article/ggcoi.html