一、 Web APIs是什么
（一）、相關的概念
1.API
-
所謂的API指的是：API（Application Programming Interface，應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，無需理解其內部工作機制細節，只需直接調用使用即可。
-
在很多的編程語言中，都有API，比如C語言中的一個函數fopen()就是打開硬盤上的某個文件。再比如js中的alert()函數，就是顯示一個提示框
2. WEB API
-
所謂的web api 指的是一套操作瀏覽器功能和頁面元素的api，由兩個部分組成DOM 和 BOM
-
你可以去MDN官方，查看更多的使用幫助 地址
3. 如何學習它呢？
- 其實webapi中有大量的函數，和一些內置的對象。你只需要掌握和使用它就行，核心點：就是會用就行。
二、DOM
(一)、概念
1.相關的概念
-
所謂的dom就是指。文檔對象模型（Document Object Model）是由w3c推薦的，針對於可擴展標記語言的，標准編程接口。可以通過它可以改變頁面的結構，內容和樣式。
-
DOM樹狀圖
- 文檔：一個頁面就是一個文檔，DOM中使用document表示
- 節點：網頁中的所有內容，在文檔樹中都是節點（標簽、屬性、文本、注釋等），使用node表示
- 標簽節點：網頁中的所有標簽，通常稱為元素節點，又簡稱為“元素”，使用element表示
- 每一個元素，都可以看做是一個對象，都有對應的屬性和方法。
2.獲取元素
要想操作頁面上的元素，需要先獲取元素
- 根據id獲取，
- 語法格式 ：[document.getElementById(id)],從字面上的意思你也能明白
- 參數 id，區分大小寫的字符串
- 返回值：元素對象或則null
實例代碼
<body>
<div id="time">2019-9-9</div>
<script>
// 因為我們文檔頁面從上往下加載，所以先得有標簽 所以我們script寫到標簽的下面
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof(timer));
// console.dir 打印我們返回的元素對象 更好的查看里面的屬性和方法
console.dir(timer);
</script>
</body>
- 根據標簽的名字來獲取元素
- 語法格式[documnet.getElementsByTagName('標簽名'),或則element.getElementsByTagName('標簽名')]
- 參數 標簽名
- 返回值：元素對象的集合（偽數組）
- 注意這樣子獲取的的元素，需要遍歷它。且是動態的獲取，
示例代碼：
<body>
<ul>
<li>BMlaoli,快來跟我學習編程吧！！！</li>
<li>BMlaoli,快來跟我學習編程吧！！！</li>
<li>BMlaoli,快來跟我學習編程吧！！！</li>
<li>BMlaoli,快來跟我學習編程吧！！！</li>
<li>BMlaoli,快來跟我學習編程吧！！！</li>
</ul>
<ul id="nav">
<li>bmlaoli。大法好！！！</li>
<li>bmlaoli。大法好！！！</li>
<li>bmlaoli。大法好！！！</li>
<li>bmlaoli。大法好！！！</li>
<li>bmlaoli。大法好！！！</li>
</ul>
<script>
// 1.返回的是 獲取過來元素對象的集合 以偽數組的形式存儲的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我們想要依次打印里面的元素對象我們可以采取遍歷的方式，for循環學得好不好，全看這里的運用了
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. element.getElementsByTagName() 可以得到這個元素里面的某些標簽
var nav = document.getElementById('nav'); // 這個獲得nav
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>
- H5新增的獲取元素的方法
- document.getElementsByClassName(類名)，注意哈，這里的獲取的元素同樣的，也是一個元素的集合，Elements，加了S！！只要是集合，偶是復數S
- document.querySelector(選擇器)。返回指定元素的第一個元素，不管是什么都可以獲取，id 的話加一個.類就是加一個# 標簽直接寫。有一定的兼容性問題，對於低版本的IE瀏覽器來說。
- document.querySelectorAll(選擇器)
- 注意哈，這里的選擇器需要加上一個 #符號
實例代碼
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首頁</li>
<li>產品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根據類名獲得某些元素集合
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>
- 如果想要獲取特殊的元素比如body html？
- doucument.body 獲取的body
- doucument.doucumentElement 獲取的是html
三、事件？
(一)、事件的相關的概念
-
簡單的來說，就是頁面發生了什么事情， 觸發--- 響應機制。
-
網頁中的每個元素都可以產生某些可以觸發 JavaScript 的事件，例如，我們可以在用戶點擊某按鈕時產生一個 事件，然后去執行某些操作。
-
事件的三要素
- 事件源（誰）：觸發事件的元素
- 事件類型（什么事件）： 例如 click 點擊事件
- 事件處理程序（做啥）：事件觸發后要執行的代碼(函數形式)，事件處理函數
實例代碼
<body>
<button id="btn">點擊我</button>
<script>
// 點擊一個按鈕，彈出對話框
// 1. 事件是有三部分組成 事件源 事件類型 事件處理程序 我們也稱為事件三要素
//(1) 事件源 事件被觸發的對象 誰 按鈕
var btn = document.getElementById('btn');
//(2) 事件類型 如何觸發 什么事件 比如鼠標點擊(onclick) 還是鼠標經過 還是鍵盤按下
//(3) 事件處理程序 通過一個函數賦值的方式 完成
btn.onclick = function() {
alert('別碰我');
}
</script>
</body>
- 步驟是什么：
- 獲取事件源，
- 綁定事件
- 添加處理程序
實例代碼
<body>
<div>123</div>
<script>
// 執行事件步驟
// 點擊div 控制台輸出 我被選中了
// 1. 獲取事件源
var div = document.querySelector('div');
// 2.綁定事件 注冊事件
// div.onclick
// 3.添加事件處理程序
div.onclick = function() {
console.log('我被選中了');
}
</script>
</body>
（二）、常見的一些事件
1.鼠標事件
(三)、如何操作元素？除了console.log
1.inner改變元素的內容
- 改變元素內容
有兩個方法，請注意他們的區別
實例代碼innerHTML改變元素內容
<body>
<button>顯示當前系統時間</button>
<div>某個時間</div>
<p>1123</p>
<script>
// 當我們點擊了按鈕， div里面的文字會發生變化
// 1. 獲取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注冊事件
btn.onclick = function() {
// div.innerText = '2019-6-6';
div.innerHTML = getDate();
}
function getDate() {
var date = new Date();
// 我們寫一個 2019年 5月 1日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
</script>
</body>
- innerText和innerHTML的區別
- 獲取內容時的區別：
innerText會去除空格和換行，而innerHTML會保留空格和換行
- 設置內容時的區別：
innerText不會識別html，而innerHTML會識別
實例代碼：
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// innerText 和 innerHTML的區別
// 1. innerText 不識別html標簽 非標准 去除空格和換行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是：</strong> 2019';
// 2. innerHTML 識別html標簽 W3C標准 保留空格和換行的
div.innerHTML = '<strong>今天是：</strong> 2019';
// 這兩個屬性是可讀寫的 可以獲取元素里面的內容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
2.改變元素對象的一些屬性，比如src等
這個比較簡單，我們來看看實例的代碼
<body>
<button id="ldh">劉德華</button>
<button id="zxy">張學友</button> <br>
<img src="images/ldh.jpg" alt="" title="劉德華">
<script>
// 修改元素屬性 src
// 1. 獲取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注冊事件 處理程序
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '張學友思密達';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '劉德華';
}
</script>
</body>