更新DOM
- 修改innerHTML属性
- 修改innerText或textContent属性,这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签.
两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。
修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize
插入DOM
- 若DOM节点为空，可直接使用innerHTML=''则可修改DOM节点内容，相当于插入了新的DOM
- 使用appendChild,把一个子节点添加到父节点的最后一个子节点。若该添加的子节点已经存在在当前文档树的话，该节点会首先从原来的位置删除，再插入到新位置。使用createElement()
-
insertBefore
parentElement.insertBefore(newElement, referenceElement);子节点会插入到referenceElement之前。
删除DOM
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉
当你遍历一个父节点的子节点并进行删除操作时，要注意，children
属性是一个只读属性，并且它在子节点变化时会实时更新。
parent.removeChild(parent.children[0]);
操作表单
-
获取值
若获得了一个<input>节点的引用，就可直接调用value获得对应的用户输入值。
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'
这种方式可以应用于text、password、hidden以及select。但是，对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断.
设置值
- 对于text、password、hidden以及select，直接设置value就可以。
- 对于单选框和复选框，设置checked为true或false即可。
提交表单
没有name属性的<input>的数据不会被提交
File API(这一块还不怎么懂)
HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。
var fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
// 清除背景图片:
preview.style.backgroundImage = '';
// 检查文件是否选择:
if (!fileInput.value) { info.innerHTML = '没有选择文件'; 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);
});
上面的代码演示了如何通过HTML5的File API读取文件内容。以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...，常用于设置图像。如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。
回调
在JavaScript中，浏览器的JavaScript执行引擎在执行JavaScript代码时，总是以单线程模式执行，也就是说，任何时候，JavaScript代码都不可能同时有多于1个线程在执行。
在JavaScript中，执行多任务实际上都是异步调用，比如上面的代码：
reader.readAsDataURL(file);
就会发起一个异步操作来读取文件内容。因为是异步操作，所以我们在JavaScript代码中就不知道什么时候操作结束，因此需要先设置一个回调函数：
reader.onload = function(e) {
// 当文件读取完成后，自动调用此函数:
};
当文件读取完成后，JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时，文件已经读取完毕，所以我们可以在回调函数内部安全地获得文件内容。
AJAX
注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。
用JavaScript请求外域（就是其他网站）的URL
- 一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。
- 二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器
- 第三种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源
- CORS是HTML5规范定义的如何跨域访问资源
Origin表示本域，也就是浏览器当前页面的域。当JavaScript向外域（如sina.com）发起请求后，浏览器收到响应后，首先检查Access-Control-Allow-Origin
是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。
假设本域是my.com，外域是sina.com，只要响应头Access-Control-Allow-Origin为http://my.com，或者是*，本次请求就可以成功。
可见，跨域能否成功，取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin，决定权始终在对方手中。
