day11(2)(3) Web API

Web API

API的概念（Application Programming Interface,應用程序編程接口）

JavaScript的組成

ECMAScript DOM BOM

ECMAScript - JavaScript的核心

定義了JavaScript 的語法規範

BOM - 瀏覽器對象模型

一套操作瀏覽器功能的API

DOM - 文檔對象模型

一套操作頁面元素的API

獲取頁面元素

根據id獲取元素（常用）

getElementById()

根據標籤名獲取元素（常用）

getElementsByTagName()

根據name獲取元素

getElementsByName()

根據類名獲取元素

getElementsByClassName()

根據選擇器獲取元素

querySelector()
querySelectorAll()

事件

事件的基本使用

var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我會生成爲標籤</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不會生成爲標籤</p>';
console.log(box.innerText);

屬性操作

非表單元素的屬性

href、title、id、src、className

innerHTML和innerText

HTML轉義符

"		"
'		'
&		&
<		&lt;   // less than  小於
>		&gt;   // greater than  大於
空格	   &nbsp;
©		&copy;

表單元素屬性

• value 用於大部分表單元素的內容獲取(option除外)
• type 可以獲取input標籤的類型(輸入框或複選框等)
• disabled 禁用屬性
• checked 複選框選中屬性
• selected 下拉菜單選中屬性

自定義屬性操作

• getAttribute() 獲取標籤行內屬性
• setAttribute() 設置標籤行內屬性
• removeAttribute() 移除標籤行內屬性
• 與element.屬性的區別: 上述三個方法用於獲取任意的行內屬性。

樣式操作

使用style方式設置的樣式顯示在標籤行內

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

類名操作

修改標籤的className屬性相當於直接修改標籤的類名

var box = document.getElementById('box');
box.className = 'show';
class屬性爲什麼用className來表示
class是關鍵字，定義變量，屬性不能用關鍵字

創建元素的三種方式

document.write()

document.write('新設置的內容<p>標籤也可以生成</p>');

innerHTML與innerText

var box = document.getElementById('box');
box.innerHTML = '<p>新標籤</p>';

document.createElement()

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

事件的三個階段

1. 捕獲階段
2. 當前目標階段
3. 冒泡階段

事件對象的屬性和方法

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

阻止事件傳播的方式

• 標準方式 event.stopPropagation();
• IE低版本 event.cancelBubble = true; 標準中已廢棄

常用的鼠標和鍵盤事件

• onmouseup 鼠標按鍵放開時觸發
• onmousedown 鼠標按鍵按下觸發
• onmousemove 鼠標移動觸發
• onkeyup 鍵盤按鍵按下觸發
• onkeydown 鍵盤按鍵擡起觸發

BOM

BOM的概念

BOM(Browser Object Model) 是指瀏覽器對象模型

對話框

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

頁面加載事件

onload

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

onunload

window.onunload = function () {
  // 當用戶退出頁面時執行
}

定時器

setTimeout()和clearTimeout()

在指定的毫秒數到達之後執行指定的函數，只執行一次

// 創建一個定時器，1000毫秒後執行，返回定時器的標示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

// 取消定時器的執行
clearTimeout(timerId);

setInterval()和clearInterval()

定時調用的函數，可以按照給定的時間(單位毫秒)週期調用函數

// 創建一個定時器，每隔1秒調用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

// 取消定時器的執行
clearInterval(timerId);

history對象

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

• back()

//歷史後退
history.back()

• forward()

//歷史前進
history.forward()

• go()

//加載歷史頁面 number（-1上一個頁面，1前進一個頁面)或是一個完整的字符串URL

history.go(number|URL)

navigator對象

Navigator 對象包含有關瀏覽器的信息。

• userAgent

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

• platform

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