1.1. Web API介紹
1.1.1 API的概念
API（Application Programming Interface，應(yīng)用程序編程接口）是一些預(yù)先定義的函數(shù)梳侨，目的是提供應(yīng)用程序與開發(fā)人員基于某軟件或硬件得以訪問一組例程的能力蛉威，而又無需訪問源碼，無需理解其內(nèi)部工作機(jī)制細(xì)節(jié)猫妙，只需直接調(diào)用使用即可瓷翻。
舉例解釋什么是API聚凹。
例如割坠，
? C語言中有一個函數(shù) fopen()可以打開硬盤上的文件，這個函數(shù)對于我們來說妒牙，就是一個C語言提供的打開文件的工具彼哼。
? javascript中有一個函數(shù)alert()可以在頁面彈一個提示框，這個函數(shù)就是js提供的一個彈框工具湘今。
這些工具（函數(shù)）由編程語言提供敢朱，內(nèi)部的實現(xiàn)已經(jīng)封裝好了，我們只要學(xué)會靈活的使用這些工具即可。
1.1.2 Web API的概念
? Web API 是瀏覽器提供的一套操作瀏覽器功能和頁面元素的 API ( BOM 和 DOM )拴签。
? 現(xiàn)階段我們主要針對于瀏覽器講解常用的 API , 主要針對瀏覽器做交互效果孝常。比如我們想要瀏覽器彈出一個警示框， 直接使用 alert(‘彈出’)
? MDN 詳細(xì) API : https://developer.mozilla.org/zh-CN/docs/Web/API
? 因為 Web API 很多蚓哩，所以我們將這個階段稱為 Web APIs构灸。
? 此處的 Web API 特指瀏覽器提供的一系列API(很多函數(shù)或?qū)ο蠓椒?，即操作網(wǎng)頁的一系列工具岸梨。例如：操作html標(biāo)簽喜颁、操作頁面地址的方法。
1.1.3 API 和 Web API 總結(jié)
API 是為我們程序員提供的一個接口曹阔，幫助我們實現(xiàn)某種功能半开，我們會使用就可以了，不必糾結(jié)內(nèi)部如何實現(xiàn)
Web API 主要是針對于瀏覽器提供的接口赃份，主要針對于瀏覽器做交互效果寂拆。
Web API 一般都有輸入和輸出（函數(shù)的傳參和返回值），Web API 很多都是方法（函數(shù)）
學(xué)習(xí) Web API 可以結(jié)合前面學(xué)習(xí)內(nèi)置對象方法的思路學(xué)習(xí)
1.2. DOM 介紹
1.2.1 什么是DOM
? 文檔對象模型（Document Object Model芥炭，簡稱DOM）漓库，是 W3C 組織推薦的處理可擴(kuò)展標(biāo)記語言（html或者xhtml）的標(biāo)準(zhǔn)編程接口。
? W3C 已經(jīng)定義了一系列的 DOM 接口园蝠，通過這些 DOM 接口可以改變網(wǎng)頁的內(nèi)容渺蒿、結(jié)構(gòu)和樣式。
DOM是W3C組織制定的一套處理 html和xml文檔的規(guī)范彪薛，所有的瀏覽器都遵循了這套標(biāo)準(zhǔn)茂装。
1.2.2. DOM樹
DOM樹 又稱為文檔樹模型，把文檔映射成樹形結(jié)構(gòu)善延，通過節(jié)點對象對其處理少态，處理的結(jié)果可以加入到當(dāng)前的頁面。
- 文檔：一個頁面就是一個文檔易遣，DOM中使用document表示
- 節(jié)點：網(wǎng)頁中的所有內(nèi)容彼妻，在文檔樹中都是節(jié)點（標(biāo)簽、屬性豆茫、文本侨歉、注釋等），使用node表示
- 標(biāo)簽節(jié)點：網(wǎng)頁中的所有標(biāo)簽揩魂，通常稱為元素節(jié)點幽邓，又簡稱為“元素”，使用element表示
1.3. 獲取元素
查詢是否有子節(jié)點火脉，返回true/false
let myHasChildNodes=document.body.hasChildNodes();
console.log(myHasChildNodes);
查詢所有子節(jié)點：childNodes
let myChildNodes=document.body.childNodes;
console.log(myChildNodes);
nodeName-節(jié)點名稱
* 文本節(jié)點--#text
* 元素節(jié)點-元素標(biāo)簽名
nodeType-節(jié)點類型
* 元素---1
* 文本---3
* 屬性---2
nodeValue--節(jié)點值
* 元素--null
* 文本--文本本身
* 屬性--屬性值
為什么要獲取頁面元素牵舵？
例如：我們想要操作頁面上的某部分(顯示/隱藏柒啤，動畫)，需要先獲取到該部分對應(yīng)的元素畸颅，再對其進(jìn)行操作担巩。
1.3.1. 根據(jù)ID獲取
語法：document.getElementById(id)
作用：根據(jù)ID獲取元素對象
參數(shù)：id值，區(qū)分大小寫的字符串
返回值：元素對象 或 null
案例代碼
<body>
<div id="time">2019-9-9</div>
<script>
// 因為我們文檔頁面從上往下加載没炒，所以先得有標(biāo)簽 所以我們script寫到標(biāo)簽的下面
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// console.dir 打印我們返回的元素對象 更好的查看里面的屬性和方法
console.dir(timer);
</script>
</body>
1.3.2. 根據(jù)標(biāo)簽名獲取元素
語法：document.getElementsByTagName('標(biāo)簽名') 或者 element.getElementsByTagName('標(biāo)簽名')
作用：根據(jù)標(biāo)簽名獲取元素對象
參數(shù)：標(biāo)簽名
返回值：元素對象集合（偽數(shù)組兵睛，數(shù)組元素是元素對象）
案例代碼
<body>
<ul>
<li>知否知否，應(yīng)是等你好久11</li>
<li>知否知否窥浪，應(yīng)是等你好久22</li>
<li>知否知否祖很，應(yīng)是等你好久33</li>
<li>知否知否，應(yīng)是等你好久44</li>
<li>知否知否漾脂，應(yīng)是等你好久55</li>
</ul>
<ul id="nav">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ul>
<script>
// 1.返回的是 獲取過來元素對象的集合 以偽數(shù)組的形式存儲的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我們想要依次打印里面的元素對象我們可以采取遍歷的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. 如果頁面中只有一個li 返回的還是偽數(shù)組的形式
// 4. 如果頁面中沒有這個元素 返回的是空的偽數(shù)組的形式
// 5. element.getElementsByTagName('標(biāo)簽名') 可以得到這個元素里面的某些標(biāo)簽
var nav = document.getElementById('nav'); // 這個獲得nav 元素
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>
注意：getElementsByTagName()獲取到是動態(tài)集合假颇，即：當(dāng)頁面增加了標(biāo)簽，這個集合中也就增加了元素骨稿。
1.3.3. H5新增獲取元素方式
案例代碼
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首頁</li>
<li>產(chǎn)品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根據(jù)類名獲得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定選擇器的第一個元素對象 切記 里面的選擇器需要加符號 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定選擇器的所有元素對象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
1.3.4 獲取特殊元素（body笨鸡，html）
1.4. 事件基礎(chǔ)
1.4.1. 事件概述
JavaScript 使我們有能力創(chuàng)建動態(tài)頁面，而事件是可以被 JavaScript 偵測到的行為坦冠。
簡單理解： 觸發(fā)--- 響應(yīng)機(jī)制形耗。
? 網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 的事件，例如辙浑，我們可以在用戶點擊某按鈕時產(chǎn)生一個 事件激涤，然后去執(zhí)行某些操作。
1.4.2. 事件三要素
- 事件源（誰）：觸發(fā)事件的元素
- 事件類型（什么事件）： 例如 click 點擊事件
- 事件處理程序（做啥）：事件觸發(fā)后要執(zhí)行的代碼(函數(shù)形式)判呕，事件處理函數(shù)
案例代碼
<body>
<button id="btn">唐伯虎</button>
<script>
// 點擊一個按鈕倦踢，彈出對話框
// 1. 事件是有三部分組成 事件源 事件類型 事件處理程序 我們也稱為事件三要素
//(1) 事件源 事件被觸發(fā)的對象 誰 按鈕
var btn = document.getElementById('btn');
//(2) 事件類型 如何觸發(fā) 什么事件 比如鼠標(biāo)點擊(onclick) 還是鼠標(biāo)經(jīng)過 還是鍵盤按下
//(3) 事件處理程序 通過一個函數(shù)賦值的方式 完成
btn.onclick = function() {
alert('點秋香');
}
</script>
</body>
1.4.3. 執(zhí)行事件的步驟
案例代碼
<body>
<div>123</div>
<script>
// 執(zhí)行事件步驟
// 點擊div 控制臺輸出 我被選中了
// 1. 獲取事件源
var div = document.querySelector('div');
// 2.綁定事件 注冊事件
// div.onclick
// 3.添加事件處理程序
div.onclick = function() {
console.log('我被選中了');
}
</script>
</body>
1.4.4. 常見的鼠標(biāo)事件
