摘要：的歷史可以追溯至年代后期微軟與的瀏覽器大戰，雙方為了在與一決生死，于是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，既有以及微軟自家的格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。

掌握API和Web API的概念

掌握常見的瀏覽器提供的API的調用方式

能通過API開發常見的頁面交互功能

能夠利用搜索引擎解決問題

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

任何開發語言都有自己的API

API的特征輸入和輸出(I/O)

API的使用方法(console.log())

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

MDN-Web API

JavaScript的組成

定義了javascript的語法規范
JavaScript的核心，描述了語言的基本語法和數據類型，ECMAScript是一套標準，定義了一種語言的標準與具體實現無關

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

一套操作頁面元素的API
DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節點進行操作

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

window是瀏覽器的頂級對象，當調用window下的屬性和方法時，可以省略window
注意：window下一個特殊的屬性 window.name

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

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

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

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

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

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

URL的組成

scheme://host:port/path?query#fragment
scheme:通信協議

常用的http,ftp,maito等

host:主機

服務器(計算機)域名系統 (DNS) 主機名或 IP 地址。

port:端口號

整數，可選，省略時使用方案的默認端口，如http的默認端口為80。

path:路徑

由零或多個"/"符號隔開的字符串，一般用來表示主機上的一個目錄或文件地址。

query:查詢

可選，用于給動態網頁傳遞參數，可有多個參數，用"&"符號隔開，每個參數的名和值用"="符號隔開。例如：name=zs

fragment:信息片斷

字符串，錨點.

location有哪些成員？

使用chrome的控制臺查看

查MDN
MDN

成員

assign()/reload()/replace()

hash/host/hostname/search/href……

history對象

back()

forward()

go()

navigator對象

userAgent

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

platform

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

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

DOM又稱為文檔樹模型

文檔：一個網頁可以稱為文檔

節點：網頁中的所有內容都是節點（標簽、屬性、文本、注釋等）

元素：網頁中的標簽

屬性：標簽的屬性

獲取元素

動態創建元素

對元素進行操作(設置其屬性或調用其方法)

事件(什么時機做相應的操作)

var div = document.getElementById("main");
console.log(div);

// 獲取到的數據類型 HTMLDivElement，對象都是有類型的
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

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

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

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

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);
}

總結

掌握

getElementById()
getElementsByTagName()

了解

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

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

事件源:觸發(被)事件的元素

事件類型:事件的觸發方式(例如鼠標點擊或鍵盤點擊)

事件處理程序:事件觸發后要執行的代碼(函數形式)

var box = document.getElementById("box");
box.onclick = function() {
  console.log("代碼會在box被點擊后執行");  
};

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 = "我是文本
我會生成為標簽
";
console.log(box.innerHTML);
box.innerText = "我是文本
我不會生成為標簽
";
console.log(box.innerText);

HTML轉義符
" "
‘ "
& &
< < //less than 小于

   >   // greater than  大于
空格       ?
?        ?

value 用于大部分表單元素的內容獲取(option除外)

type 可以獲取input標簽的類型(輸入框或復選框等)

disabled 禁用屬性

checked 復選框選中屬性

selected 下拉菜單選中屬性

getAttribute() 獲取標簽行內屬性

setAttribute() 設置標簽行內屬性

removeAttribute() 移除標簽行內屬性

與element.屬性的區別: 上述三個方法用于獲取任意的行內屬性。

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

document.write()

document.write("新設置的內容
標簽也可以生成
");

innerHTML

var box = document.getElementById("box");
box.innerHTML = "新內容
新標簽
";

document.createElement()

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

innerHTML方法由于會對字符串進行解析，需要避免在循環內多次使用。

可以借助字符串或數組的方式進行替換，再設置給innerHTML

優化后與document.createElement性能相近

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

重點講父子屬性，兄弟屬性畫圖講解

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的區別，childNodes獲取的是子節點，children獲取的是子元素
nextSibling和previousSibling獲取的是節點，獲取元素對應的屬性是nextElementSibling和previousElementSibling獲取的是元素

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

總結

節點操作，方法

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

節點層次，屬性

  parentNode
  childNodes
  children
  nextSibling/previousSibling
  firstChild/lastChild

var box = document.getElementById("box");
box.onclick = function () {
  console.log("點擊后執行");
};
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("點擊后執行");
}

捕獲階段

當前目標階段

冒泡階段
事件對象.eventPhase屬性可以查看事件觸發時所處的階段

event.type 獲取事件類型

clientX/clientY 所有瀏覽器都支持，窗口位置

pageX/pageY IE8以前不支持，頁面位置

event.target || event.srcElement 用于獲取觸發事件的元素

event.preventDefault() 取消默認行為

標準方式 event.stopPropagation();

IE低版本 event.cancelBubble = true; 標準中已廢棄

onmouseup 鼠標按鍵放開時觸發

onmousedown 鼠標按鍵按下觸發

onmousemove 鼠標移動觸發

onkeyup 鍵盤按鍵按下觸發

onkeydown 鍵盤按鍵抬起觸發