1、DOM介紹

概念

Document Object Model ，文檔對象模型

將標記語言的各個組成部分封裝為對應的對象：

• Document：整個文檔對象
• Element：元素對象
• Attribute：屬性對象
• Text：文本對象
• Comment：注釋對象

JavaScript 通過DOM，就能夠對HTML進行操作：

• 改變 HTML 元素的內容
• 改變 HTML 元素的樣式（CSS）
• 對 HTML DOM 事件作出反應
• 添加和刪除 HTML 元素

2、DOM：獲取Element對象

HTML中的Element對象可以通過Document對象獲取，而Document對象是通過window對象獲取的。

Document對象中提供了以下獲取Element元素對象的函數:

1、根據id屬性值獲取，返回單個Element對象

<img id="light" src="img/off.gif"> <br>
<script>document.getElementById("light").src = "img/on.gif";
</script>

2、根據標簽名稱獲取，返回Element對象數組

<div>小林</div>   <br>
<div>不想努力了</div> <br><script>// getElementsByTagName：根據標簽名稱獲取元素數組// innerHTML：表示修改標簽元素中的內容let htmlDivElement = document.getElementsByTagName("div");for (let element of htmlDivElement){element.innerHTML = "哈哈";}
</script>

3、根據name屬性值獲取，返回Element對象數組

<input type="checkbox" name="hobby"> 電影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戲<script>let elementsByName = document.getElementsByName("hobby");for (let hobbyElement of elementsByName) {hobbyElement.checked = true;}
</script>

4、根據class屬性值獲取，返回Element對象數組

<div class="cls">Java</div><br>
<div class="cls">PHP</div><br><script>let elementsByClassName = document.getElementsByClassName("cls");for (let ClassNameElement of elementsByClassName) {ClassNameElement.innerHTML = "嘻嘻";}
</script>

3、DOM：事件監聽

3.1、事件介紹

什么是事件

? 用戶可以對網頁的元素有各種不同的操作如：單擊，雙擊，鼠標移動等這些操作就稱為事件。事件通常與函數配合使用，這樣就可以通過發生的事件來驅動JavaScript函數執行。

3.2、常見事件

事件名	說明
onclick	鼠標單擊事件
onblur	元素失去焦點
onfocus	元素獲得焦點
onload	某個頁面或圖像被完成加載
onsubmit	當表單提交時觸發該事件
onkeydown	某個鍵盤的鍵被按下
onmouseover	鼠標被移到某元素之上
onmouseout	鼠標從某元素移開

3.3、設置事件的兩種方式

方式一：命名函數

通過標簽中的事件屬性進行綁定

<button type="button" onclick="函數名()"></button><script>// 命名函數設置事件function abc(){alert("你點我了")}
</script>

方式二：匿名函數

通過DOM元素屬性綁定

<input type="button" id="btn"><script>// 匿名函數設置失去焦點的事件document.getElementById("btn").onclick = function (){alert("我被點了")}
</script>

3.4、事件案例

當輸入用戶名時顯示正在輸入，離開時顯示請輸入

案例代碼

用戶名: <input id="in1" name="user">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="sp1">請輸入</span><script>document.getElementById("in1").onfocus = function (){document.getElementById("sp1").innerHTML = "正在輸入"}document.getElementById("in1").onblur = function (){document.getElementById("sp1").innerHTML = "請輸入"}
</script>