浏览器

背景

 

IE 6~11：到IE10支持ES6

Chrome: 基于Webkit内核的V8 JavaScript搜索引擎

Safari: OS X 10.7 Lion自带的6.1版本开始支持ES6，目前最新的OS X 10.11 El Capitan自带的Safari版本是9.x，早已支持ES6

Firefox: Mozilla自己研制的Gecko内核和JavaScript引擎OdinMonkey

 

浏览器对象:window

 

window innerWidth和innerHeight属性 ie<=8 不支持

navigator 表示浏览器的信息,为了兼容各个版本可以使用短路运算符||

screen 屏幕

 

Dom操作

 

动态创建一个节点然后添加到DOM树中

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

list.insertBefore(haskell, ref);//通过insertBefore将haskell节点插入到ref节点后面

 

删除DOM(removeChild)

 

删除dom需要知道该dom的父节点

var parent = document.getElementById('parent'); parent.removeChild(parent.children[0]);

表单提交

• 文本框，对应的<input type="text">，用于输入文本；
• 口令框，对应的<input type="password">，用于输入口令；
• 单选框，对应的<input type="radio">，用于选择一项；
• 复选框，对应的<input type="checkbox">，用于选择多项；
• 下拉框，对应的<select>，用于选择一项；
• 隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var pwd = document.getElementById('password');
    // 把用户输入的明文变为MD5:
    pwd.value = toMD5(pwd.value);
    // 继续下一步:
    return true; //true 继续提交 ;false 中断提交
}
</script>

Canvas(Echarts) 

可以进行相关图表、地图的绘画

<canvas id="test-canvas" width="300" height="200"></canvas>