摘要：相關(guān)最大的特性就在于直接操縱網(wǎng)頁上的節(jié)點(diǎn)，從而實(shí)現(xiàn)網(wǎng)頁的局部刷新而非全局刷新。該回調(diào)函數(shù)會(huì)在送回響應(yīng)的時(shí)候被調(diào)用。當(dāng)然了，如果瀏覽器不支持對(duì)象，會(huì)返回，在這時(shí)需要進(jìn)行額外的處理。

馬上就要參加一個(gè)團(tuán)隊(duì)項(xiàng)目進(jìn)行React的前端開發(fā)了。最近正在著手熟練React語法，然后發(fā)現(xiàn)本質(zhì)上還是建立在對(duì)javascript的深刻理解上。市面上在js基礎(chǔ)上封裝出了非常多優(yōu)秀的車輪，其中最被新手廣泛使用的當(dāng)屬jquery。熟悉jquery語法的童鞋可能會(huì)覺得js的語法非常的啰嗦，但是在ES6的最新標(biāo)準(zhǔn)出現(xiàn)以后，js重獲新生，可以造出更優(yōu)秀的輪子了（笑）。所以在這里我重新整理一下js的基本知識(shí)點(diǎn)。

JS最大的特性就在于直接操縱網(wǎng)頁上的DOM節(jié)點(diǎn)，從而實(shí)現(xiàn)網(wǎng)頁的局部刷新而非全局刷新。這個(gè)特性決定了只要瀏覽器不死，js就還是會(huì)活躍在一線作為底層的實(shí)現(xiàn)優(yōu)化瀏覽器的加載。當(dāng)然曾經(jīng)對(duì)JS的濫用也導(dǎo)致在一段時(shí)間內(nèi)，人們對(duì)彈窗廣告嗤之以鼻，這一段時(shí)期是JS的用戶體驗(yàn)的低谷期。然而在爆炸互聯(lián)網(wǎng)時(shí)期，隨著瀏覽器承擔(dān)了更多本來桌面應(yīng)用承擔(dān)的功能，JS的深度運(yùn)用也逐漸被開發(fā)出來。下面是一些我整理的API關(guān)于直接操縱DOM節(jié)點(diǎn)的。

getElementById(idname): 返回id值為idname的節(jié)點(diǎn)
getElementsByTagName(tagname) : 返回array對(duì)象，array中的元素為標(biāo)簽名是tagname的節(jié)點(diǎn)
getElementsByClassName(className) : 返回array對(duì)象，array中為class中包含className的節(jié)點(diǎn)

getAttribute(attributeName) : 該方法作用于節(jié)點(diǎn)上，獲得節(jié)點(diǎn)attributeName屬性的內(nèi)容
setAttribute(attributeName, value) : 該方法作用域節(jié)點(diǎn)上，修改節(jié)點(diǎn)attributeName屬性的值
childNodes : 該屬性可以用來獲得任何一個(gè)元素的所有子元素，這個(gè)子元素包含元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，屬性節(jié)點(diǎn)
nodeType : 獲得元素節(jié)點(diǎn)的屬性值，元素節(jié)點(diǎn)屬性值為1，屬性節(jié)點(diǎn)的屬性值為2，文本節(jié)點(diǎn)的屬性值為3
nodeValue : 獲得節(jié)點(diǎn)的屬性值，注意一定要作用在文本節(jié)點(diǎn)上，否則得到的值是null，也可以用于賦值
firstChild : 獲得第一個(gè)子節(jié)點(diǎn)，等價(jià)于node.childNodes[0]
lastChild : 獲得最后子節(jié)點(diǎn)，等價(jià)于node.childNodes[childNodes.length-1]
nextSibling : 獲得相鄰的節(jié)點(diǎn)
parentNode : 父節(jié)點(diǎn)

innerHTML : 獲得或更改當(dāng)前節(jié)點(diǎn)下的所有html代碼
createElement(element) : 創(chuàng)建一個(gè)元素節(jié)點(diǎn)
createTextNode(text) : 創(chuàng)建一個(gè)文本節(jié)點(diǎn)
appendChild(child) : 將child節(jié)點(diǎn)插入當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn) 
parentElement.insertBefore(newElement, targetElement) : 在已有元素前插入一個(gè)新元素。這個(gè)方法的設(shè)計(jì)有點(diǎn)累贅，可見js當(dāng)初給自己的定位就是單純的腳本語言啊。

JS最頂層的全局屬性就是Window，通過全局的window我們可以定義很多瀏覽器行為比如彈出窗口，彈出警告，跳轉(zhuǎn)至新的窗口等。

window.open(url, name, features) : 創(chuàng)建新的瀏覽器窗口，這個(gè)方法的三個(gè)參數(shù)都是可選的。第一個(gè)參數(shù)是指新窗口的URL地址，如果忽略這個(gè)參數(shù)會(huì)彈出一個(gè)新的空白瀏覽窗。第二個(gè)參數(shù)是新窗口的名字，可以在代碼里通過新窗口的名字和這個(gè)窗口通信。最后一個(gè)參數(shù)是以逗號(hào)分隔的字符串，其內(nèi)容是新窗口的各種屬性，比如尺寸，工具欄。
window.onload : 頁面被加載時(shí)進(jìn)行的工作，可以賦值給它一個(gè)方法，如果想要執(zhí)行多個(gè)方法，也可以將其封裝進(jìn)一個(gè)方法?；蛘呤謩?dòng)創(chuàng)建一個(gè)addEvent的方法來給其動(dòng)態(tài)賦值

以前和瀏覽器交互意味著發(fā)送請(qǐng)求然后瀏覽器重新返回一個(gè)新的頁面，然而跟原來頁面相比，可能只需要頁面上極少的一部分發(fā)生改變。AJAX可以做到異步向服務(wù)器發(fā)送請(qǐng)求并根據(jù)數(shù)據(jù)只更新一小部分界面。很多框架都對(duì)JS的AJAX進(jìn)行了封裝，從而讓代碼更加簡潔高效,而且可以在不同的瀏覽器上實(shí)現(xiàn)兼容（IE笑了）。

范例：

    function getNewContent(){
        //在這里不考慮兼容性，直接返回XMLHttpRequest對(duì)象
        var request = new XMLHttpRequest(); 
        if(request){
            request.open("GET", "example.txt", true);
            request.onreadystatechange = function(){
                if(request.readyState == 4){
                    ....
                }
            };
            request.send(null);
        }else{
            alert("瀏覽器不支持XMLHttpRequest");
        }
    }

在這里先使用open方法打開一個(gè)ajax請(qǐng)求，然后傳入回調(diào)函數(shù)。該回調(diào)函數(shù)會(huì)在XMLHttpRequest送回響應(yīng)的時(shí)候被調(diào)用。當(dāng)然了，如果瀏覽器不支持XMLHttpRequest對(duì)象，會(huì)返回false，在這時(shí)需要進(jìn)行額外的處理。

readystate有五個(gè)可能的屬性值：

0 : 未初始化
1 : 正在加載
2 : 加載完畢
3 : 正在交互
4 : 完成

返回的響應(yīng)內(nèi)容可以在request.responseText中查看

accesskey="1" : 返回到本網(wǎng)站主頁
accesskey="2" : 后退到前一頁面
accesskey="4" : 打開本網(wǎng)站的搜索表單/頁面
accesskey="9" : 本網(wǎng)站聯(lián)系方法
accesskey="0" : 查看本網(wǎng)站的快捷鍵清單

variable = setTimeOut("function", interval) : 將function在一段interval之后開始執(zhí)行
clearTimeOut(variable) : 取消等待執(zhí)行隊(duì)列里的某個(gè)函數(shù)

parseInt("") : 返回輸入值中的整數(shù)
parseFloat("") : 返回輸入值中的小數(shù)

這些都是我在閱讀了《Script DOM編程藝術(shù)》之后的一些隨手筆記。其實(shí)這本書非常適合入門，因?yàn)樗o了一些簡單的示例讓我們?cè)趯?duì)JS了解甚少的情況下清楚HTML+CSS+JS是怎樣的工作模式。不過對(duì)于真正的語法講解甚少，所以可謂是基礎(chǔ)之基礎(chǔ)。