概念：

平穩(wěn)退化

漸進(jìn)增強(qiáng)

以用戶為中心

可以使用DOM（Document Object Model）給HTML（HyperText Markup Language）文檔增加交互能力，就像CSS（Cascading Style Sheet）給文檔增加樣式一樣。DOM是一種API（Application Programing Interface），就是一種已得到各方認(rèn)同的基本約定，作為一種標(biāo)準(zhǔn)可以使得人們更方便的進(jìn)行交流和合作，類(lèi)似于化學(xué)元素周期表、莫爾斯碼，W3C聯(lián)盟推出的標(biāo)準(zhǔn)化DOM理論上可以讓任何一種程序設(shè)計(jì)語(yǔ)言對(duì)使用任何一種標(biāo)記語(yǔ)言編寫(xiě)出來(lái)的任何一份文檔進(jìn)行操控。

W3C聯(lián)盟對(duì)DOM的定義：一個(gè)與系統(tǒng)平臺(tái)和編程語(yǔ)言無(wú)關(guān)的接口，程序和腳本可以通過(guò)這個(gè)接口動(dòng)態(tài)的訪問(wèn)和修改文檔的內(nèi)容、結(jié)構(gòu)和樣式。

程序語(yǔ)言分為解釋型和編譯型兩大類(lèi)

編譯型

Java、C++等語(yǔ)言需要一個(gè)編譯器（Compiler）。編譯器是一種程序，能夠把用Java等解釋型高級(jí)語(yǔ)言編寫(xiě)出來(lái)的源代碼翻譯為直接在計(jì)算機(jī)上執(zhí)行的文件。
編譯型的語(yǔ)言編寫(xiě)的代碼如果有錯(cuò)誤，這些錯(cuò)誤會(huì)在代碼編譯階段就會(huì)被發(fā)現(xiàn)。與解釋型語(yǔ)言相比速度更快，可移植性更高，但學(xué)習(xí)曲線也更陡峭。

解釋型

解釋型語(yǔ)言不需要編譯器，僅需要解釋器。對(duì)于JavaScript語(yǔ)言，在互聯(lián)網(wǎng)環(huán)境下Web瀏覽器負(fù)責(zé)完成有關(guān)的解釋和執(zhí)行工作。瀏覽器中的JavaScript解釋器將直接讀入源代碼并執(zhí)行。瀏覽器中如果沒(méi)有解釋器，JavaScript代碼就無(wú)法執(zhí)行。
解釋型語(yǔ)言編寫(xiě)的代碼只能等到解釋器執(zhí)行到有關(guān)代碼時(shí)才能被發(fā)現(xiàn)。

每行結(jié)尾并不一定需要分號(hào)，不過(guò)為了更容易追蹤JavaScript腳本的執(zhí)行順序還是推介加上；
var不關(guān)心變量的類(lèi)型，ex：

var str="happy", str1 = 50;
str = 33;

字符串可以包括在雙引號(hào)或者單引號(hào)里，如果在引號(hào)中包括引號(hào)，那么需要對(duì)這個(gè)字符進(jìn)行轉(zhuǎn)義（escaping）：

var str="about 5"10" tall";

數(shù)組聲明：

var beatles = ["John", "Paul", "George", "Ringo", true, 44, strA, [0, false, "my Dog", strB]];
var arr1 = Array();
var arr2 = [];
arr2["name"] = "John";

對(duì)象聲明：

var lennon = Object();
lennon.name = "Smith";
var lennon1 = {name: "Ringo", age: 78};

比較操作符：

var strC = false;
if (strC == "") {
    alert("xixi");        //會(huì)輸出
}

相等操作符 == 會(huì)認(rèn)為false與空字符串含義相同，如果要進(jìn)行嚴(yán)格比較，則需要全等操作符 ===，全等操作符會(huì)執(zhí)行嚴(yán)格的比較，不僅會(huì)比較值，還會(huì)比較變量的類(lèi)型，嚴(yán)格不相等也類(lèi)似 !== 。ex：

var strC = false;
if (strC === "") {
    alert("xixi");        //不會(huì)輸出
}

在if()或者while()的判斷條件中，整數(shù)中0被判斷為false，除了0之外都為true包括負(fù)數(shù)。

while (-1.1) {
    alert("memeda");      //會(huì)一直輸出
}

for循環(huán):

var beatles = ["John", "Paul", "George", "Ringo", true, 44, [0, false, "my Dog", strB]];
for (var strE = 0; strE < beatles.length; strE++) {
    alert(beatles[strE]);
}

函數(shù)：

function shout(para) {
    var beatles = [para, 44];
    for (var strE = 0; strE < beatles.length; strE++) {
        alert(beatles[strE]);
    }
}
shout("xixixi");        //彈出2條alert： xixixi , 44

變量和函數(shù)的命名（為了能一眼看出哪些是變量，哪些是函數(shù)）：

變量使用下劃線來(lái)分割各個(gè)單詞，如temp_celsius；

函數(shù)名使用首字母小寫(xiě)的駝峰命名法，如convertToCelsius；

內(nèi)建對(duì)象（Native Object）:

Array

Math

var num = 7.454;
num = Math.round(num);
alert(num);                    //輸出四舍五入結(jié)果：7

Date

var current_date=new Date();
var today=current_date.getDate();
alert(today);                  //輸出當(dāng)天日期

etc...

DOM是針對(duì)XML但是經(jīng)過(guò)擴(kuò)展用于HTML的應(yīng)用程序編程接口。DOM把整個(gè)頁(yè)面映射為一個(gè)多層節(jié)點(diǎn)結(jié)構(gòu)。

D指的是document，當(dāng)創(chuàng)建了一個(gè)網(wǎng)頁(yè)并將其加載到web瀏覽器中時(shí)，DOM已經(jīng)被創(chuàng)建，它把編寫(xiě)的網(wǎng)頁(yè)文檔轉(zhuǎn)換成一個(gè)文檔對(duì)象。

O指的是對(duì)象object，js中的對(duì)象包括：

用戶自定義對(duì)象（user-defined object）：自行創(chuàng)建的對(duì)象

內(nèi)建對(duì)象（native object）：內(nèi)建在js中的對(duì)象，如Array、Math、Date

宿主對(duì)象（host object）：由瀏覽器提供的對(duì)象

最基礎(chǔ)的宿主對(duì)象：window對(duì)象：

window.open("http://www.baidu.com", "","", false);    //彈出百度窗口，也可以是新窗口

M指的是Model，有三種DOM方法可以獲取元素節(jié)點(diǎn)，分別是通過(guò)ID，通過(guò)標(biāo)簽名，和通過(guò)類(lèi)名來(lái)獲取。

getElementById

返回一個(gè)有著給定ID屬性值的元素節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象，它是document對(duì)象特有的函數(shù)，并且形參是要獲取的id值，放在單引號(hào)或雙引號(hào)里：

Hello World!

getElementsByTagName

返回一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象對(duì)應(yīng)著文檔里有著給定標(biāo)簽的一個(gè)元素，形參是標(biāo)簽，且在引號(hào)內(nèi)：

    
Data1
    
Data2
    
Data3

getElementsByClassName

返回具有Class名的對(duì)象數(shù)組，還可以查找那些帶有多個(gè)類(lèi)名的元素，并不是所有瀏覽器都支持：

    
Data1
    
Data2
    
Data3

如果瀏覽器不一定支持，那么可以使用：

function getElementsByClassName(node, classname) {    //node是DOM樹(shù)中搜索起點(diǎn)，也可以是document，不支持多個(gè)class搜索
    if (node.getElementsByClassName) {
        return node.getElementsByClassName(classname);
    } else {
        var results = [];
        var elems = node.getElementsByTagName("*");
        for (var i = 0; i < elems.length; i++) {
            if (elems[i].className.indexOf(classname) != -1) {
                results[results.length] = elems[i];
            }
        }
    }
}

getAttribute & setAttribute

可以用來(lái)獲取和設(shè)置節(jié)點(diǎn)的屬性：

Hello World!

通過(guò)setAttribute對(duì)文檔作出修改后，通過(guò)查看源代碼發(fā)現(xiàn)文檔源代碼仍然是改變之前的值，也就是說(shuō)，setAttribute作出的修改并不會(huì)反映到文檔本身的源代碼里，原因是DOM的工作模式：先加載文檔的靜態(tài)內(nèi)容，再動(dòng)態(tài)刷新，動(dòng)態(tài)刷新不影響文檔的靜態(tài)內(nèi)容。
這正是DOM的真正威力：對(duì)頁(yè)面內(nèi)容進(jìn)行刷新卻不需要在瀏覽器里刷新頁(yè)面。

需要說(shuō)明的是，若一個(gè)站點(diǎn)要用到多個(gè)js文件，為了減少對(duì)站點(diǎn)的請(qǐng)求次數(shù)提高性能，應(yīng)該把這些js文件合并到一個(gè)文件中。圖片同理。

實(shí)例：

    
Data1
    
Data2
    
Data3
    
Data4

實(shí)現(xiàn)一個(gè)在點(diǎn)擊a標(biāo)簽時(shí)把placeholder占位圖片替換成a標(biāo)簽對(duì)應(yīng)的圖片，并攔截點(diǎn)擊a時(shí)網(wǎng)頁(yè)的默認(rèn)行為。
另外，setAttribute方法是DOM Level1 的內(nèi)容，它可以設(shè)置任意元素節(jié)點(diǎn)的任意屬性，在DOM Level1出現(xiàn)之前的HTML-DOM還可以通過(guò)：element.value="value"來(lái)直接設(shè)置元素的屬性，不過(guò)不推介使用這種方式，這種方式只適用于web文檔，而DOM則適用于任何一種標(biāo)記語(yǔ)言，因?yàn)椤癉OM是一種適用于多種環(huán)境和多種程序設(shè)計(jì)語(yǔ)言的通用型API”，比如xml，為了更好的移植性，嚴(yán)格遵守DOM Level1可以避免很多問(wèn)題。

nodeType屬性可以得到任何節(jié)點(diǎn)的節(jié)點(diǎn)屬性：

元素節(jié)點(diǎn)的nodeType值為1

屬性節(jié)點(diǎn)的nodeType值為2

文本節(jié)點(diǎn)的nodeType值為3

nodeValue屬性：

可以用來(lái)檢索節(jié)點(diǎn)的值，也可以用來(lái)設(shè)置節(jié)點(diǎn)的值。

    
xixi1
    
xixi2
    
xixi3

Hello

平穩(wěn)退化（graceful degradation）確保網(wǎng)頁(yè)在沒(méi)有js的情況下也能正常工作；就是說(shuō)，雖然某些功能無(wú)法使用，但最基本的操作仍能順利實(shí)現(xiàn)。

Example

這種方式比JavaScript偽協(xié)議：href="javascript:..."和href="#" onclick=“...”，方式效果要好得多，即使在js功能已被禁用或者遇到爬蟲(chóng)的情況下，鏈接也是可用的，雖然功能上打了折扣，但是并沒(méi)有徹底失效。

漸進(jìn)增強(qiáng)（progressive enhancement）原則基于這樣一種思想：實(shí)現(xiàn)良好的結(jié)構(gòu)應(yīng)該從最核心的部分，也就是從內(nèi)容開(kāi)始。根據(jù)內(nèi)容使用標(biāo)記實(shí)現(xiàn)良好的結(jié)構(gòu)；然后再逐步加強(qiáng)這些內(nèi)容，這些增強(qiáng)工作可以是通過(guò)css改進(jìn)呈現(xiàn)效果，也可以通過(guò)DOM添加各種行為，如果使用DOM來(lái)添加核心內(nèi)容，那么這是不推介的，并且也不利于網(wǎng)站SEO，js也沒(méi)有任何空間去平穩(wěn)退化，那些缺乏js支持的訪問(wèn)者就無(wú)法看到其內(nèi)容。

確保老版本的瀏覽器不會(huì)因?yàn)槟愕膉s而掛掉；
可以使用對(duì)象檢測(cè)（object detection）：

window.onload = function () {
    if (!document.getElementsByTagName()) return false;
}

檢測(cè)瀏覽器是否支持這一方法，來(lái)避免老版本瀏覽器不會(huì)因?yàn)樾录尤氲膉s出錯(cuò)。

把網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容與js腳本的動(dòng)作行為分開(kāi)；

確保腳本執(zhí)行的性能最優(yōu)；

避免搜索浪費(fèi)

if(document.getElementsByTagName("a").length>0){        //不推介
    var links=document.getElementsByTagName("a");
    for(var i=0;i
這樣會(huì)進(jìn)行兩次.getElementsByTagName()搜索，造成性能浪費(fèi)，因此不推介。如果有多個(gè)函數(shù)重復(fù)做一件事，那么可以把搜索結(jié)果放在全局變量中，或者把一組元素直接以參數(shù)形式傳遞給函數(shù)，以免造成搜索浪費(fèi)。
合并與放置腳本
在部分的腳本會(huì)導(dǎo)致瀏覽器無(wú)法并行加載其他文件，因此推介在文檔末尾之前引入script元素，可以讓頁(yè)面變得更快；根據(jù)HTTP規(guī)范，瀏覽器每次從同一個(gè)域名最多只能同時(shí)下載兩個(gè)文件，而在下載腳本期間，瀏覽器不會(huì)下載其他任何文件，即使是來(lái)自不同域名的文件也不會(huì)下載，所有其他資源要等腳本加載完畢后才能下載。
壓縮腳本
可以使用壓縮工具來(lái)刪除腳本文件中不必要的字節(jié)，比如空格和注釋?zhuān)械膲嚎s工具設(shè)置會(huì)重寫(xiě)部分代碼，使用更短的變量名，從而減少整體文件大小。精簡(jiǎn)后的代碼不易看懂，但會(huì)大幅減小文件大小，一般會(huì)在壓縮后的文件名后加上.min.，比如 scriptName.min.js 。
第六章 案例：圖片庫(kù)改進(jìn)
ex：

    
    
Data1
    
Data2
    
Data3
    
Data4




第七章 動(dòng)態(tài)創(chuàng)建標(biāo)記
傳統(tǒng)方法
document.write可以方便的把字符串插入文檔（不推介）


innerHTML方法會(huì)替換元素內(nèi)的所有內(nèi)容。


DOM方法
插入節(jié)點(diǎn)的子元素后


插入元素后：
var place = document.createElement("p");
place.appendChild(document.createTextNode("百度"));
var tar = document.getElementById("tar");

tar.parentNode.insertBefore(place, tar);
插入元素前：
var place = document.createElement("p");
place.appendChild(document.createTextNode("百度"));
var tar = document.getElementById("tar");

insertAfter(place, hhh);

function insertAfter(newElement, targetElement) {       //插入目標(biāo)元素后
    var parent = targetElement.parentNode;
    if (parent.lastChild === targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextElementSibling);
    }
}
Ajax
Ajax的主要優(yōu)勢(shì)是對(duì)頁(yè)面的請(qǐng)求以異步的方式發(fā)送到服務(wù)器。而服務(wù)器不會(huì)用整個(gè)頁(yè)面來(lái)響應(yīng)請(qǐng)求，它會(huì)在后臺(tái)處理請(qǐng)求，與此同時(shí)用戶還能繼續(xù)瀏覽頁(yè)面并與頁(yè)面交互腳本則可以按需加載和創(chuàng)建頁(yè)面內(nèi)容，而不會(huì)打斷用戶的瀏覽體驗(yàn)。
Ajax的核心是XMLHttpRequest對(duì)象，這個(gè)對(duì)象充當(dāng)瀏覽器中的客戶端與服務(wù)器之間的橋梁角色，以往的請(qǐng)求由瀏覽器發(fā)出，而js通過(guò)這個(gè)對(duì)象可以自己發(fā)送請(qǐng)求，同事也自己處理響應(yīng)。



第八章 充實(shí)文檔內(nèi)容
js腳本只應(yīng)該用來(lái)充實(shí)文檔的內(nèi)容，而避免使用DOM來(lái)創(chuàng)建核心內(nèi)容；
遍歷快捷鍵，ex：

    
home
    
contact
    
search



PS：歡迎大家關(guān)注我的公眾號(hào)【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長(zhǎng)按識(shí)別下面二維碼即可加我好友，備注加群，我拉你入群～