Web APIs

本篇學習目標：
能夠通過ID來獲取元素
能夠通過標簽名來獲取元素
能夠通過class來獲取元素
能夠通過選擇器來獲取元素
能夠獲取body和html元素
能夠給元素注冊事件
能夠修改元素的內容
能夠區分innerText和innerHTML的區別
能夠修改像div這類普通元素的屬性
能夠修改表單元素的屬性
能夠修改元素的樣式屬性

1.1. Web API介紹

1.1.1 API的概念

API（Application Programming Interface，應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基于某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，無需理解其內部工作機制細節，只需直接調用使用即可。

在這里插入圖片描述

舉例解釋什么是API。

例如，

? C語言中有一個函數 fopen()可以打開硬盤上的文件，這個函數對于我們來說，就是一個C語言提供的打開文件的工具。

? javascript中有一個函數alert()可以在頁面彈一個提示框，這個函數就是js提供的一個彈框工具。

這些工具（函數）由編程語言提供，內部的實現已經封裝好了，我們只要學會靈活的使用這些工具即可。

1.1.2 Web API的概念

? Web API 是瀏覽器提供的一套操作瀏覽器功能和頁面元素的 API ( BOM 和 DOM )。

? 現階段我們主要針對于瀏覽器講解常用的 API , 主要針對瀏覽器做交互效果。比如我們想要瀏覽器彈出一個警示框，直接使用 alert(‘彈出’)

? MDN 詳細 API : https://developer.mozilla.org/zh-CN/docs/Web/API

? 因為 Web API 很多，所以我們將這個階段稱為 Web APIs。

? 此處的 Web API 特指瀏覽器提供的一系列API(很多函數或對象方法)，即操作網頁的一系列工具。例如：操作html標簽、操作頁面地址的方法。

1.1.3 API 和 Web API 總結

API 是為我們程序員提供的一個接口，幫助我們實現某種功能，我們會使用就可以了，不必糾結內部如何實現
Web API 主要是針對于瀏覽器提供的接口，主要針對于瀏覽器做交互效果。
Web API 一般都有輸入和輸出（函數的傳參和返回值），Web API 很多都是方法（函數）
學習 Web API 可以結合前面學習內置對象方法的思路學習

1.2. DOM 介紹

1.2.1 什么是DOM

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

? W3C 已經定義了一系列的 DOM 接口，通過這些 DOM 接口可以改變網頁的內容、結構和樣式。

DOM是W3C組織制定的一套處理 html和xml文檔的規范，所有的瀏覽器都遵循了這套標準。

1.2.2. DOM樹

在這里插入圖片描述

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

文檔：一個頁面就是一個文檔，DOM中使用document表示
節點：網頁中的所有內容，在文檔樹中都是節點（標簽、屬性、文本、注釋等），使用node表示
標簽節點：網頁中的所有標簽，通常稱為元素節點，又簡稱為“元素”，使用element表示

在這里插入圖片描述

以前的文檔都是寫死的，靜態的，如果希望在頁面中動態修改文檔，所以出現了Dom的概念，Dom就是將所有節點都看作對象，然后使用JS提供的API操作節點

1.3. 獲取元素

為什么要獲取頁面元素？

例如：我們想要操作頁面上的某部分(顯示/隱藏，動畫)，需要先獲取到該部分對應的元素，再對其進行操作。

1.3.1. 根據ID獲取

語法：document.getElementById(id)
作用：根據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>

1.3.2. 根據標簽名獲取元素

語法：document.getElementsByTagName('標簽名') 或者 element.getElementsByTagName('標簽名') 
作用：根據標簽名獲取元素對象
參數：標簽名
返回值：元素對象集合（偽數組，數組元素是元素對象）

案例代碼

<body><ul><li>知否知否，應是等你好久11</li><li>知否知否，應是等你好久22</li><li>知否知否，應是等你好久33</li><li>知否知否，應是等你好久44</li><li>知否知否，應是等你好久55</li></ul><ul id="nav"><li>生僻字</li><li>生僻字</li><li>生僻字</li><li>生僻字</li><li>生僻字</li></ul><script>// 1.返回的是 獲取過來元素對象的集合 以偽數組的形式存儲的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. element.getElementsByTagName()  可以得到這個元素里面的某些標簽var nav = document.getElementById('nav'); // 這個獲得nav 元素var navLis = nav.getElementsByTagName('li');console.log(navLis);</script>
</body>

在這里插入圖片描述

注意：getElementsByTagName()獲取到是動態集合，即：當頁面增加了標簽，這個集合中也就增加了元素。

getElementsByTagName 和 getElementsByClassName 函數的返回值都是集合，而 getElmentById 函數的返回值不是集合，而是一個元素

1.3.3. H5新增獲取元素方式

在這里插入圖片描述

案例代碼

<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  #navvar 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. 事件基礎

1.4.1. 事件概述

JavaScript 使我們有能力創建動態頁面，而事件是可以被 JavaScript 偵測到的行為。

簡單理解： 觸發— 響應機制。

? 網頁中的每個元素都可以產生某些可以觸發 JavaScript 的事件，例如，我們可以在用戶點擊某按鈕時產生一個事件，然后去執行某些操作。

1.4.2. 事件三要素

事件源（誰）：觸發事件的元素
事件類型（什么事件）：例如 click 點擊事件
事件處理程序（做啥）：事件觸發后要執行的代碼(函數形式)，事件處理函數

案例代碼

<body><button id="btn">唐伯虎</button><script>// 點擊一個按鈕，彈出對話框// 1. 事件是有三部分組成  事件源  事件類型  事件處理程序   我們也稱為事件三要素//(1) 事件源 事件被觸發的對象   誰  按鈕var btn = document.getElementById('btn');//(2) 事件類型  如何觸發 什么事件 比如鼠標點擊(onclick) 還是鼠標經過 還是鍵盤按下//(3) 事件處理程序  通過一個函數賦值的方式 完成btn.onclick = function() {alert('點秋香');}</script>
</body>

1.4.3. 執行事件的步驟

在這里插入圖片描述

案例代碼

<body><div>123</div><script>// 執行事件步驟// 點擊div 控制臺輸出 我被選中了// 1. 獲取事件源var div = document.querySelector('div');// 2.綁定事件 注冊事件// div.onclick // 3.添加事件處理程序 div.onclick = function() {console.log('我被選中了');}</script>
</body>

1.4.4. 常見的鼠標事件

在這里插入圖片描述

1.4.5. 分析事件三要素

下拉菜單
關閉廣告

1.5. 操作元素

? JavaScript的 DOM 操作可以改變網頁內容、結構和樣式，我們可以利用 DOM 操作元素來改變元素里面的內容、屬性等。（注意：這些操作都是通過元素對象的屬性實現的）

html開始標記與結束標記之間的部分就是元素的內容

1.5.1. 改變元素內容（獲取或設置）

在這里插入圖片描述

innerText改變元素內容

<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>

1.5.2. 常用元素的屬性操作

在這里插入圖片描述

獲取屬性的值

元素對象.屬性名

設置屬性的值

元素對象.屬性名 = 值

案例代碼

<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>

1.5.3. 案例：分時問候

在這里插入圖片描述

1.5.4. 表單元素的屬性操作

在這里插入圖片描述

獲取屬性的值

元素對象.屬性名

設置屬性的值

元素對象.屬性名 = 值

表單元素中有一些屬性如：disabled、checked、selected，元素對象的這些屬性的值是布爾型。

案例代碼

<body><button>按鈕</button><input type="text" value="輸入內容"><script>// 1. 獲取元素var btn = document.querySelector('button');var input = document.querySelector('input');// 2. 注冊事件 處理程序btn.onclick = function() {// 表單里面的值 文字內容是通過 value 來修改的input.value = '被點擊了';// 如果想要某個表單被禁用 不能再點擊 disabled  我們想要這個按鈕 button禁用// btn.disabled = true;this.disabled = true;// this 指向的是事件函數的調用者 btn}</script>
</body>

1.5.5. 案例：仿京東顯示密碼

在這里插入圖片描述

1.5.6. 樣式屬性操作

JS 操作元素樣式有兩種方式

1）通過style 操作元素的某個單一的樣式，此種方式操作的是元素的嵌入樣式

2）通過classnam 操作元素的樣式

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

常用方式

在這里插入圖片描述

方式1：通過操作style屬性

元素對象的style屬性也是一個對象！

元素對象.style.樣式屬性 = 值;

在這里插入圖片描述

案例代碼

<body><div></div><script>// 1. 獲取元素var div = document.querySelector('div');// 2. 注冊事件 處理程序div.onclick = function() {// div.style里面的屬性 采取駝峰命名法 this.style.backgroundColor = 'purple';this.style.width = '250px';}</script>
</body>

案例：淘寶點擊關閉二維碼

在這里插入圖片描述

案例：循環精靈圖背景

在這里插入圖片描述

案例：顯示隱藏文本框內容

在這里插入圖片描述

方式2：通過操作className屬性

元素對象.className = 值;

因為class是關鍵字，所有使用className。

在這里插入圖片描述

案例代碼

<body><div class="first">文本</div><script>// 1. 使用 element.style 獲得修改元素樣式  如果樣式比較少 或者 功能簡單的情況下使用var test = document.querySelector('div');test.onclick = function() {// this.style.backgroundColor = 'purple';// this.style.color = '#fff';// this.style.fontSize = '25px';// this.style.marginTop = '100px';// 2. 我們可以通過 修改元素的className更改元素的樣式 適合于樣式較多或者功能復雜的情況// 3. 如果想要保留原先的類名，我們可以這么做 多類名選擇器// this.className = 'change';this.className = 'first change';}</script>
</body>