前端進(jìn)階（一）掌握Web API，開發(fā)常見的頁面交互功能

目標(biāo)

• 掌握API和Web API的概念
• 掌握常見的瀏覽器提供的API的調(diào)用方式
• 能通過API開發(fā)常見的頁面交互功能
• 能夠利用搜索引擎解決問題

自己是個(gè)做了幾年開發(fā)的老碼農(nóng)，希望本文對你有用！ 這里推薦一下我的前端學(xué)習(xí)交流圈：767273102 ，里面都是學(xué)習(xí)前端的，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計(jì)模式】到移動端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴。2019最新技術(shù)，與企業(yè)需求同步。好友都在里面學(xué)習(xí)交流，每天都會有大牛定時(shí)講解前端技術(shù)!

點(diǎn)擊： 加入

Web API

API的概念
API（Application Programming Interface,應(yīng)用程序編程接口）是一些預(yù)先定義的函數(shù)，目的是提供應(yīng)用程序與開發(fā)人員基于某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內(nèi)部工作機(jī)制的細(xì)節(jié)。

• 任何開發(fā)語言都有自己的API
• API的特征輸入和輸出(I/O)
• API的使用方法(console.log())

Web API的概念

瀏覽器提供的一套操作瀏覽器功能和頁面元素的API(BOM和DOM)
此處的Web API特指瀏覽器提供的API(一組方法)，Web API在后面的課程中有其它含義

掌握常見的瀏覽器提供的API的調(diào)用方式

MDN-Web API

JavaScript的組成

ECMAScript - JavaScript的核心

定義了javascript的語法規(guī)范
JavaScript的核心，描述了語言的基本語法和數(shù)據(jù)類型，ECMAScript是一套標(biāo)準(zhǔn)，定義了一種語言的標(biāo)準(zhǔn)與具體實(shí)現(xiàn)無關(guān)

BOM - 瀏覽器對象模型

一套操作瀏覽器功能的API
通過BOM可以操作瀏覽器窗口，比如：彈出框、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等

DOM - 文檔對象模型

一套操作頁面元素的API
DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節(jié)點(diǎn)進(jìn)行操作

BOM

BOM的概念
BOM(Browser Object Model) 是指瀏覽器對象模型，瀏覽器對象模型提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)。BOM由多個(gè)對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
我們在瀏覽器中的一些操作都可以使用BOM的方式進(jìn)行編程處理，
比如：刷新瀏覽器、后退、前進(jìn)、在瀏覽器中輸入U(xiǎn)RL等

BOM的頂級對象window

window是瀏覽器的頂級對象，當(dāng)調(diào)用window下的屬性和方法時(shí)，可以省略window
注意：window下一個(gè)特殊的屬性 window.name

對話框

• alert()
• prompt()
• confirm()

頁面加載事件

onload

window.onload = function () {
  // 當(dāng)頁面加載完成執(zhí)行
  // 當(dāng)頁面完全加載所有內(nèi)容（包括圖像、腳本文件、CSS 文件等）執(zhí)行
}

onunload

window.onunload = function () {
  // 當(dāng)用戶退出頁面時(shí)執(zhí)行
}

定時(shí)器

setTimeout()和clearTimeout()
在指定的毫秒數(shù)到達(dá)之后執(zhí)行指定的函數(shù)，只執(zhí)行一次

// 創(chuàng)建一個(gè)定時(shí)器，1000毫秒后執(zhí)行，返回定時(shí)器的標(biāo)示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);
// 取消定時(shí)器的執(zhí)行
clearTimeout(timerId);

setInterval()和clearInterval()

定時(shí)調(diào)用的函數(shù)，可以按照給定的時(shí)間(單位毫秒)周期調(diào)用函數(shù)

// 創(chuàng)建一個(gè)定時(shí)器，每隔1秒調(diào)用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);
// 取消定時(shí)器的執(zhí)行
clearInterval(timerId);

location對象

location對象是window對象下的一個(gè)屬性，時(shí)候的時(shí)候可以省略window對象
location可以獲取或者設(shè)置瀏覽器地址欄的URL

URL

統(tǒng)一資源定位符 (Uniform Resource Locator, URL)

• URL的組成

  scheme://host:port/path?query#fragment
  scheme:通信協(xié)議

  常用的http,ftp,maito等
  

  host:主機(jī)

  服務(wù)器(計(jì)算機(jī))域名系統(tǒng) (DNS) 主機(jī)名或 IP 地址。
  

  port:端口號

  整數(shù)，可選，省略時(shí)使用方案的默認(rèn)端口，如http的默認(rèn)端口為80。
  

  path:路徑

  由零或多個(gè)'/'符號隔開的字符串，一般用來表示主機(jī)上的一個(gè)目錄或文件地址。
  

  query:查詢

  可選，用于給動態(tài)網(wǎng)頁傳遞參數(shù)，可有多個(gè)參數(shù)，用'&'符號隔開，每個(gè)參數(shù)的名和值用'='符號隔開。例如：name=zs
  

  fragment:信息片斷

  字符串，錨點(diǎn).
  

location有哪些成員？

• 使用chrome的控制臺查看

• 查MDN
  MDN

• 成員

  • assign()/reload()/replace()
  • hash/host/hostname/search/href……

history對象

• back()
• forward()
• go()

navigator對象

• userAgent

通過userAgent可以判斷用戶瀏覽器的類型

• platform

通過platform可以判斷瀏覽器所在的系統(tǒng)平臺類型.

DOM

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)志語言的標(biāo)準(zhǔn)編程接口。在網(wǎng)頁上，組織頁面（或文檔）的對象被組織在一個(gè)樹形結(jié)構(gòu)中，用來表示文檔中對象的標(biāo)準(zhǔn)模型就稱為DOM。Document Object Model的歷史可以追溯至1990年代后期微軟與Netscape的“瀏覽器大戰(zhàn)”，雙方為了在JavaScript與JScript一決生死，于是大規(guī)模的賦予瀏覽器強(qiáng)大的功能。微軟在網(wǎng)頁技術(shù)上加入了不少專屬事物，既有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網(wǎng)頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當(dāng)時(shí)蘊(yùn)釀出來的杰作。

DOM又稱為文檔樹模型

• 文檔：一個(gè)網(wǎng)頁可以稱為文檔
• 節(jié)點(diǎn)：網(wǎng)頁中的所有內(nèi)容都是節(jié)點(diǎn)（標(biāo)簽、屬性、文本、注釋等）
• 元素：網(wǎng)頁中的標(biāo)簽
• 屬性：標(biāo)簽的屬性

DOM經(jīng)常進(jìn)行的操作

• 獲取元素
• 動態(tài)創(chuàng)建元素
• 對元素進(jìn)行操作(設(shè)置其屬性或調(diào)用其方法)
• 事件(什么時(shí)機(jī)做相應(yīng)的操作)

獲取頁面元素

根據(jù)id獲取元素

var div = document.getElementById('main');
console.log(div);
// 獲取到的數(shù)據(jù)類型 HTMLDivElement，對象都是有類型的
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

根據(jù)標(biāo)簽名獲取元素

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

根據(jù)name獲取元素*

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

根據(jù)類名獲取元素

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

根據(jù)選擇器獲取元素

var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

• 總結(jié)

  掌握

  getElementById()
  getElementsByTagName()
  

  了解

  getElementsByName()
  getElementsByClassName()
  querySelector()
  querySelectorAll()
  

事件

事件：觸發(fā)-響應(yīng)機(jī)制
Event接口表示在DOM中發(fā)生的任何事件，一些是用戶生成的（例如鼠標(biāo)或鍵盤事件），而其他由API生成。

事件三要素

• 事件源:觸發(fā)(被)事件的元素
• 事件類型:事件的觸發(fā)方式(例如鼠標(biāo)點(diǎn)擊或鍵盤點(diǎn)擊)
• 事件處理程序:事件觸發(fā)后要執(zhí)行的代碼(函數(shù)形式)

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代碼會在box被點(diǎn)擊后執(zhí)行');  
};

屬性操作

非表單元素的屬性

href、title、id、src、className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var pic = document.getElementById('pic');
console.log(pic.src);

innerHTML和innerText

var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我會生成為標(biāo)簽</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不會生成為標(biāo)簽</p>';
console.log(box.innerText);

HTML轉(zhuǎn)義符
" "
‘ '
& &
< < //less than 小于

> // greater than 大于

空格
? ?

表單元素屬性

• value 用于大部分表單元素的內(nèi)容獲取(option除外)
• type 可以獲取input標(biāo)簽的類型(輸入框或復(fù)選框等)
• disabled 禁用屬性
• checked 復(fù)選框選中屬性
• selected 下拉菜單選中屬性

自定義屬性操作

• getAttribute() 獲取標(biāo)簽行內(nèi)屬性
• setAttribute() 設(shè)置標(biāo)簽行內(nèi)屬性
• removeAttribute() 移除標(biāo)簽行內(nèi)屬性
• 與element.屬性的區(qū)別: 上述三個(gè)方法用于獲取任意的行內(nèi)屬性。

樣式操作

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

類名操作

var box = document.getElementById('box');
box.className = 'clearfix';

創(chuàng)建元素的三種方式

document.write()

document.write('新設(shè)置的內(nèi)容<p>標(biāo)簽也可以生成</p>');

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新內(nèi)容<p>新標(biāo)簽</p>';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

性能問題

• innerHTML方法由于會對字符串進(jìn)行解析，需要避免在循環(huán)內(nèi)多次使用。
• 可以借助字符串或數(shù)組的方式進(jìn)行替換，再設(shè)置給innerHTML
• 優(yōu)化后與document.createElement性能相近

節(jié)點(diǎn)操作

var body = document.body;
var div = document.createElement('div');
body.appendChild(div);
var firstEle = body.children[0];
body.insertBefore(div,firstEle);
body.removeChild(firstEle);
var text = document.createElement('p');
body.replaceChild(text, div);

節(jié)點(diǎn)層級

重點(diǎn)講父子屬性，兄弟屬性畫圖講解

var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);

• 注意
  childNodes和children的區(qū)別，childNodes獲取的是子節(jié)點(diǎn)，children獲取的是子元素
  nextSibling和previousSibling獲取的是節(jié)點(diǎn)，獲取元素對應(yīng)的屬性是nextElementSibling和previousElementSibling獲取的是元素

  nextElementSibling和previousElementSibling有兼容性問題，IE9以后才支持
  

• 總結(jié)

  節(jié)點(diǎn)操作，方法

    appendChild()
    insertBefore()
    removeChild()
    replaceChild()
  

  節(jié)點(diǎn)層次，屬性

    parentNode
    childNodes
    children
    nextSibling/previousSibling
    firstChild/lastChild
  

事件詳解

注冊/移除事件的三種方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('點(diǎn)擊后執(zhí)行');
};
box.onclick = null;
box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);
box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);
function eventCode() {
  console.log('點(diǎn)擊后執(zhí)行');
}

事件的三個(gè)階段

1. 捕獲階段
2. 當(dāng)前目標(biāo)階段
3. 冒泡階段
   事件對象.eventPhase屬性可以查看事件觸發(fā)時(shí)所處的階段

事件對象的屬性和方法

• event.type 獲取事件類型
• clientX/clientY 所有瀏覽器都支持，窗口位置
• pageX/pageY IE8以前不支持，頁面位置
• event.target || event.srcElement 用于獲取觸發(fā)事件的元素
• event.preventDefault() 取消默認(rèn)行為

阻止事件傳播的方式

• 標(biāo)準(zhǔn)方式 event.stopPropagation();
• IE低版本 event.cancelBubble = true; 標(biāo)準(zhǔn)中已廢棄

常用的鼠標(biāo)和鍵盤事件

• onmouseup 鼠標(biāo)按鍵放開時(shí)觸發(fā)
• onmousedown 鼠標(biāo)按鍵按下觸發(fā)
• onmousemove 鼠標(biāo)移動觸發(fā)
• onkeyup 鍵盤按鍵按下觸發(fā)
• onkeydown 鍵盤按鍵抬起觸發(fā)