概念：

平穩退化

漸進增強

以用戶為中心

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

W3C聯盟對DOM的定義：一個與系統平臺和編程語言無關的接口，程序和腳本可以通過這個接口動態的訪問和修改文檔的內容、結構和樣式。

程序語言分為解釋型和編譯型兩大類

編譯型

Java、C++等語言需要一個編譯器（Compiler）。編譯器是一種程序，能夠把用Java等解釋型高級語言編寫出來的源代碼翻譯為直接在計算機上執行的文件。
編譯型的語言編寫的代碼如果有錯誤，這些錯誤會在代碼編譯階段就會被發現。與解釋型語言相比速度更快，可移植性更高，但學習曲線也更陡峭。

解釋型

解釋型語言不需要編譯器，僅需要解釋器。對于JavaScript語言，在互聯網環境下Web瀏覽器負責完成有關的解釋和執行工作。瀏覽器中的JavaScript解釋器將直接讀入源代碼并執行。瀏覽器中如果沒有解釋器，JavaScript代碼就無法執行。
解釋型語言編寫的代碼只能等到解釋器執行到有關代碼時才能被發現。

每行結尾并不一定需要分號，不過為了更容易追蹤JavaScript腳本的執行順序還是推介加上；
var不關心變量的類型，ex：

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

字符串可以包括在雙引號或者單引號里，如果在引號中包括引號，那么需要對這個字符進行轉義（escaping）：

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

數組聲明：

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

對象聲明：

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

比較操作符：

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

相等操作符 == 會認為false與空字符串含義相同，如果要進行嚴格比較，則需要全等操作符 ===，全等操作符會執行嚴格的比較，不僅會比較值，還會比較變量的類型，嚴格不相等也類似 !== 。ex：

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

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

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

for循環:

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

函數：

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

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

變量使用下劃線來分割各個單詞，如temp_celsius；

函數名使用首字母小寫的駝峰命名法，如convertToCelsius；

內建對象（Native Object）:

Array

Math

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

Date

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

etc...

DOM是針對XML但是經過擴展用于HTML的應用程序編程接口。DOM把整個頁面映射為一個多層節點結構。

D指的是document，當創建了一個網頁并將其加載到web瀏覽器中時，DOM已經被創建，它把編寫的網頁文檔轉換成一個文檔對象。

O指的是對象object，js中的對象包括：

用戶自定義對象（user-defined object）：自行創建的對象

內建對象（native object）：內建在js中的對象，如Array、Math、Date

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

最基礎的宿主對象：window對象：

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

M指的是Model，有三種DOM方法可以獲取元素節點，分別是通過ID，通過標簽名，和通過類名來獲取。

getElementById

返回一個有著給定ID屬性值的元素節點對應的對象，它是document對象特有的函數，并且形參是要獲取的id值，放在單引號或雙引號里：

Hello World!

getElementsByTagName

返回一個對象數組，每個對象對應著文檔里有著給定標簽的一個元素，形參是標簽，且在引號內：

    
Data1
    
Data2
    
Data3

getElementsByClassName

返回具有Class名的對象數組，還可以查找那些帶有多個類名的元素，并不是所有瀏覽器都支持：

    
Data1
    
Data2
    
Data3

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

function getElementsByClassName(node, classname) {    //node是DOM樹中搜索起點，也可以是document，不支持多個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

可以用來獲取和設置節點的屬性：

Hello World!

通過setAttribute對文檔作出修改后，通過查看源代碼發現文檔源代碼仍然是改變之前的值，也就是說，setAttribute作出的修改并不會反映到文檔本身的源代碼里，原因是DOM的工作模式：先加載文檔的靜態內容，再動態刷新，動態刷新不影響文檔的靜態內容。
這正是DOM的真正威力：對頁面內容進行刷新卻不需要在瀏覽器里刷新頁面。

需要說明的是，若一個站點要用到多個js文件，為了減少對站點的請求次數提高性能，應該把這些js文件合并到一個文件中。圖片同理。

實例：

    
Data1
    
Data2
    
Data3
    
Data4

實現一個在點擊a標簽時把placeholder占位圖片替換成a標簽對應的圖片，并攔截點擊a時網頁的默認行為。
另外，setAttribute方法是DOM Level1 的內容，它可以設置任意元素節點的任意屬性，在DOM Level1出現之前的HTML-DOM還可以通過：element.value="value"來直接設置元素的屬性，不過不推介使用這種方式，這種方式只適用于web文檔，而DOM則適用于任何一種標記語言，因為“DOM是一種適用于多種環境和多種程序設計語言的通用型API”，比如xml，為了更好的移植性，嚴格遵守DOM Level1可以避免很多問題。

nodeType屬性可以得到任何節點的節點屬性：

元素節點的nodeType值為1

屬性節點的nodeType值為2

文本節點的nodeType值為3

nodeValue屬性：

可以用來檢索節點的值，也可以用來設置節點的值。

    
xixi1
    
xixi2
    
xixi3

Hello

平穩退化（graceful degradation）確保網頁在沒有js的情況下也能正常工作；就是說，雖然某些功能無法使用，但最基本的操作仍能順利實現。

Example

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

漸進增強（progressive enhancement）原則基于這樣一種思想：實現良好的結構應該從最核心的部分，也就是從內容開始。根據內容使用標記實現良好的結構；然后再逐步加強這些內容，這些增強工作可以是通過css改進呈現效果，也可以通過DOM添加各種行為，如果使用DOM來添加核心內容，那么這是不推介的，并且也不利于網站SEO，js也沒有任何空間去平穩退化，那些缺乏js支持的訪問者就無法看到其內容。

確保老版本的瀏覽器不會因為你的js而掛掉；
可以使用對象檢測（object detection）：

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

檢測瀏覽器是否支持這一方法，來避免老版本瀏覽器不會因為新加入的js出錯。

把網頁的結構和內容與js腳本的動作行為分開；

確保腳本執行的性能最優；

避免搜索浪費

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

    
    
Data1
    
Data2
    
Data3
    
Data4




第七章 動態創建標記
傳統方法
document.write可以方便的把字符串插入文檔（不推介）


innerHTML方法會替換元素內的所有內容。


DOM方法
插入節點的子元素后


插入元素后：
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) {       //插入目標元素后
    var parent = targetElement.parentNode;
    if (parent.lastChild === targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextElementSibling);
    }
}
Ajax
Ajax的主要優勢是對頁面的請求以異步的方式發送到服務器。而服務器不會用整個頁面來響應請求，它會在后臺處理請求，與此同時用戶還能繼續瀏覽頁面并與頁面交互腳本則可以按需加載和創建頁面內容，而不會打斷用戶的瀏覽體驗。
Ajax的核心是XMLHttpRequest對象，這個對象充當瀏覽器中的客戶端與服務器之間的橋梁角色，以往的請求由瀏覽器發出，而js通過這個對象可以自己發送請求，同事也自己處理響應。



第八章 充實文檔內容
js腳本只應該用來充實文檔的內容，而避免使用DOM來創建核心內容；
遍歷快捷鍵，ex：

    
home
    
contact
    
search



PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

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