更新DOM
- 修改innerHTML屬性
- 修改innerText或textContent屬性,這樣可以自動(dòng)對(duì)字符串進(jìn)行HTML編碼抵拘，保證無(wú)法設(shè)置任何HTML標(biāo)簽.
兩者的區(qū)別在于讀取屬性時(shí)茫多，innerText不返回隱藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。
修改CSS也是經(jīng)常需要的操作。DOM節(jié)點(diǎn)的style屬性對(duì)應(yīng)所有的CSS系馆，可以直接獲取或設(shè)置。因?yàn)镃SS允許font-size這樣的名稱顽照，但它并非JavaScript有效的屬性名由蘑，所以需要在JavaScript中改寫(xiě)為駝峰式命名fontSize
插入DOM
- 若DOM節(jié)點(diǎn)為空，可直接使用innerHTML=''則可修改DOM節(jié)點(diǎn)內(nèi)容代兵，相當(dāng)于插入了新的DOM
- 使用appendChild,把一個(gè)子節(jié)點(diǎn)添加到父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)尼酿。若該添加的子節(jié)點(diǎn)已經(jīng)存在在當(dāng)前文檔樹(shù)的話，該節(jié)點(diǎn)會(huì)首先從原來(lái)的位置刪除植影，再插入到新位置裳擎。使用createElement()
-
insertBefore
parentElement.insertBefore(newElement, referenceElement);子節(jié)點(diǎn)會(huì)插入到referenceElement之前。
刪除DOM
要?jiǎng)h除一個(gè)節(jié)點(diǎn)思币，首先要獲得該節(jié)點(diǎn)本身以及它的父節(jié)點(diǎn)鹿响，然后，調(diào)用父節(jié)點(diǎn)的removeChild把自己刪掉
當(dāng)你遍歷一個(gè)父節(jié)點(diǎn)的子節(jié)點(diǎn)并進(jìn)行刪除操作時(shí)谷饿，要注意惶我，children
屬性是一個(gè)只讀屬性，并且它在子節(jié)點(diǎn)變化時(shí)會(huì)實(shí)時(shí)更新博投。
parent.removeChild(parent.children[0]);
操作表單
-
獲取值
若獲得了一個(gè)<input>節(jié)點(diǎn)的引用绸贡，就可直接調(diào)用value獲得對(duì)應(yīng)的用戶輸入值。
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用戶輸入的值'
這種方式可以應(yīng)用于text毅哗、password听怕、hidden以及select。但是虑绵，對(duì)于單選框和復(fù)選框叉跛，value屬性返回的永遠(yuǎn)是HTML預(yù)設(shè)的值，而我們需要獲得的實(shí)際是用戶是否“勾上了”選項(xiàng)蒸殿，所以應(yīng)該用checked判斷.
設(shè)置值
- 對(duì)于text筷厘、password鸣峭、hidden以及select，直接設(shè)置value就可以酥艳。
- 對(duì)于單選框和復(fù)選框摊溶，設(shè)置checked為true或false即可。
提交表單
沒(méi)有name屬性的<input>的數(shù)據(jù)不會(huì)被提交
File API(這一塊還不怎么懂)
HTML5的File API提供了File和FileReader兩個(gè)主要對(duì)象充石，可以獲得文件信息并讀取文件莫换。
var fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = document.getElementById('test-image-preview');
// 監(jiān)聽(tīng)change事件:
fileInput.addEventListener('change', function () {
// 清除背景圖片:
preview.style.backgroundImage = '';
// 檢查文件是否選擇:
if (!fileInput.value) { info.innerHTML = '沒(méi)有選擇文件'; return; }
// 獲取File引用:
var file = fileInput.files[0];
// 獲取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的圖片文件!'); return; }
// 讀取文件:
var reader = new FileReader();
reader.onload = function(e) { var data = e.target.result;
// 'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...'
preview.style.backgroundImage = 'url(' + data + ')'; };
// 以DataURL的形式讀取文件:
reader.readAsDataURL(file);
});
上面的代碼演示了如何通過(guò)HTML5的File API讀取文件內(nèi)容。以DataURL的形式讀取到的文件是一個(gè)字符串骤铃，類(lèi)似于data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...拉岁，常用于設(shè)置圖像。如果需要服務(wù)器端處理惰爬，把字符串base64,后面的字符發(fā)送給服務(wù)器并用Base64解碼就可以得到原始文件的二進(jìn)制內(nèi)容喊暖。
回調(diào)
在JavaScript中，瀏覽器的JavaScript執(zhí)行引擎在執(zhí)行JavaScript代碼時(shí)撕瞧，總是以單線程模式執(zhí)行陵叽，也就是說(shuō)，任何時(shí)候丛版，JavaScript代碼都不可能同時(shí)有多于1個(gè)線程在執(zhí)行巩掺。
在JavaScript中，執(zhí)行多任務(wù)實(shí)際上都是異步調(diào)用页畦，比如上面的代碼：
reader.readAsDataURL(file);
就會(huì)發(fā)起一個(gè)異步操作來(lái)讀取文件內(nèi)容胖替。因?yàn)槭钱惒讲僮鳎晕覀冊(cè)贘avaScript代碼中就不知道什么時(shí)候操作結(jié)束豫缨，因此需要先設(shè)置一個(gè)回調(diào)函數(shù)：
reader.onload = function(e) {
// 當(dāng)文件讀取完成后刊殉，自動(dòng)調(diào)用此函數(shù):
};
當(dāng)文件讀取完成后，JavaScript引擎將自動(dòng)調(diào)用我們?cè)O(shè)置的回調(diào)函數(shù)州胳。執(zhí)行回調(diào)函數(shù)時(shí)，文件已經(jīng)讀取完畢逸月，所以我們可以在回調(diào)函數(shù)內(nèi)部安全地獲得文件內(nèi)容栓撞。
AJAX
注意：AJAX請(qǐng)求是異步執(zhí)行的，也就是說(shuō)碗硬，要通過(guò)回調(diào)函數(shù)獲得響應(yīng)瓤湘。
用JavaScript請(qǐng)求外域（就是其他網(wǎng)站）的URL
- 一是通過(guò)Flash插件發(fā)送HTTP請(qǐng)求，這種方式可以繞過(guò)瀏覽器的安全限制恩尾，但必須安裝Flash弛说，并且跟Flash交互。不過(guò)Flash用起來(lái)麻煩翰意，而且現(xiàn)在用得也越來(lái)越少了木人。
- 二是通過(guò)在同源域名下架設(shè)一個(gè)代理服務(wù)器來(lái)轉(zhuǎn)發(fā)信柿，JavaScript負(fù)責(zé)把請(qǐng)求發(fā)送到代理服務(wù)器
- 第三種方式稱為JSONP，它有個(gè)限制醒第，只能用GET請(qǐng)求渔嚷，并且要求返回JavaScript。這種方式跨域?qū)嶋H上是利用了瀏覽器允許跨域引用JavaScript資源
- CORS是HTML5規(guī)范定義的如何跨域訪問(wèn)資源
Origin表示本域稠曼，也就是瀏覽器當(dāng)前頁(yè)面的域形病。當(dāng)JavaScript向外域（如sina.com）發(fā)起請(qǐng)求后，瀏覽器收到響應(yīng)后霞幅，首先檢查Access-Control-Allow-Origin
是否包含本域漠吻，如果是，則此次跨域請(qǐng)求成功司恳，如果不是途乃，則請(qǐng)求失敗，JavaScript將無(wú)法獲取到響應(yīng)的任何數(shù)據(jù)抵赢。
假設(shè)本域是my.com欺劳，外域是sina.com，只要響應(yīng)頭Access-Control-Allow-Origin為http://my.com铅鲤，或者是*划提，本次請(qǐng)求就可以成功。
可見(jiàn)邢享，跨域能否成功鹏往，取決于對(duì)方服務(wù)器是否愿意給你設(shè)置一個(gè)正確的Access-Control-Allow-Origin，決定權(quán)始終在對(duì)方手中骇塘。
