在瞭解了javascript的語言基礎和特性後
javascript真正大放光彩的地方來了——這就是javascript DOM
Javascript DOM
DOM(Document Object Model)，文檔對象模型。
是W3C組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口；W3C已經定義了一系列DOM接口，通過這些DOM接口可以改變網頁的內容、結構和樣式。
簡單的說就是一套操作文檔內容的方法。
需要注意的是，我們需要把DOM當作一個整體，不能分割看待，即DOM（文檔對象模型）是一套操作文檔內容的方法。
- 文檔：一個頁面就是一個文檔，DOM中使用document表示
- 元素：頁面中的所有標籤都是元素，DOM中使用element表示
- 節點：網頁中的所有內容都是節點（標籤、屬性、文本、註釋等），DOM中使用node表示
DOM把以上內容看作都是對象
實例：
<!DOCTYPE html>
<html>
<head>
<title>Shopping list</title>
<meta charset="utf-8">
</head>
<body>
<h1>What to buy</h1>
<p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases">
<li>A tin od beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
</body>
</html>
用樹表示這個網頁的結構：
1、獲取DOM四種基本方法
1、getElementById()
2、getElementsByTagname()
3、getAttribute()
4、setAttribute()
常用的兩種解析：
1. getElementById()：
參數：元素的ID值。 （元素節點簡稱元素）
返回值：一個有指定ID的元素對象（元素是對象）
注：這個方法是與document對象相關聯，只能由document對象調用。
用法：document.getElementById(Id)
例：
typeof document.getElementById("purchases");//object
代碼演練：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="time">2020-04-16</div>
<script>
// 1. 因爲我們文檔頁面從上往下加載，所以先得有標籤 所以我們script寫到標籤的下面
// 2. get 獲得 element 元素 by 通過 駝峯命名法
// 3. 參數 id是大小寫敏感的字符串
// 4. 返回的是一個元素對象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我們返回的元素對象 更好的查看裏面的屬性和方法
console.dir(timer);
</script>
</body>
</html>
看一下控制檯打印的是什麼
可以看到 console.log(timer)打印出來的是整個div標籤
timer類型是個對象
2. getElementsByTagName():
參數：元素名
返回值：一個對象數組。這個數組裏每個元素都是對象，每個對象分別對應着文檔裏給定標籤的一個元素。
注：這個方法可和一般元素關聯。這個方法允許我們把通配符當作它的參數，返回在某份html文檔裏總共有多少個元素節點。
用法：element.getElementsByTagName(TagName)
例：
var items=document.getElementsByTagName("li");
items.length;//3
document.getElementsByTagName(“*”);//12
2、事件基礎
3.1 事件概述
JavaScript使我們有能力創建動態頁面，而事件是可以被JavaScript偵測到的行爲。
簡單理解：觸發——>響應機制
網頁中每個元素都可以產生某些可以觸發JavaScript的事件，例如，我們可以在用戶點擊某按鈕產生一個事件，然後去執行某些操作
3.2 事件三要素
事件源 、事件類型、事件處理程序，我們也稱爲事件三要素
(1) 事件源 事件被觸發的對象 誰
(2) 事件類型 如何觸發 什麼事件 比如鼠標點擊(onclick) 還是鼠標經過 還是鍵盤按下
(3) 事件處理程序 通過一個函數賦值的方式 完成
代碼實例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">唐伯虎</button>
<script>
// 點擊一個按鈕，彈出對話框
// 1. 事件是有三部分組成 事件源 事件類型 事件處理程序 我們也稱爲事件三要素
//(1) 事件源 事件被觸發的對象 誰 按鈕
var btn = document.getElementById('btn');
//(2) 事件類型 如何觸發 什麼事件 比如鼠標點擊(onclick) 還是鼠標經過 還是鍵盤按下
//(3) 事件處理程序 通過一個函數賦值的方式 完成
btn.onclick = function() {
alert('點秋香');
}
</script>
</body>
</html>
運行結果
3.3 執行事件的步驟
1、獲取事件源
2、註冊事件（綁定事件）
3、添加事件處理程序（採取函數賦值形式）
代碼實戰
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>123</div>
<script>
// 執行事件步驟
// 點擊div 控制檯輸出 我被選中了
// 1. 獲取事件源
var div = document.querySelector('div');
// 2.綁定事件 註冊事件
// div.onclick
// 3.添加事件處理程序
div.onclick = function() {
console.log('我被選中了');
}
</script>
</body>
</html>
運行結果
鼠標點擊123—>控制檯打印
常用的DOM事件
- onclick事件---當用戶點擊時執行
- onload事件---當用戶進入時執行
- onunload事件---用用戶離開時執行
- onmouseover事件---當用戶鼠標指針移入時執行
- onmouseout事件---當用戶鼠標指針移出時執行
- onmousedown事件---當用戶鼠標摁下時執行
- onmouseup事件---當用戶鼠標鬆開時執行
後續~~~~