前言
之前讲都是js的纯基本语法，表达式啥的，跟浏览器无关，可以使用node和控制台执行；
往后讲的只有浏览器里才会有。
HTML的加载顺序
- 从上到下，从外到里依次加载
- js的三种引入方式
- 内联<script>
- 行内属性上写
- 外链.js文件
总之
<script>标签内，属性值中，.js文件里直接写js代码。
你告诉js内存，要做某个事，
DOM响应到有这个事情发生，把结果映射到浏览器让我们看到
及时响应
如果改了颜色背景，都需要css渲染，渲染过程可以忽略不计。
main.style.color = ["red","blue"][Math.random()2 | 0]
Math.random()表示0到1之间的随机小数，不包括0和1
Math.random()2 | 0 表示0或者1
DOM API学习
DOM结构的操作
- 对象引用，相当于拉了个线，
=== 对象类型等完全一样，如果不是基础类型（字符串，数字），那就是同一个东西，修改一个另一个也会修改。 - 集合不是数组，但类数组。
document.all[0] 是按照加载顺序取的,从上到下，从外到里依次加载
document.getElemntBy系列
document.referrer 从哪里来的URL,返回""或者url字符串
document.lastModified 最后修改时间
![Uploading 1-sibling_578152.jpg . . .]
document.domain 当前url的域名，可以被修改，
但是只允许从二级修改到顶级域名（XXX.com, XX.cn, XXX.com.cn）
frame操作不能跨域，可以修改到顶级域，名假装同域名进行操作,
但是如果当前页,面有关联太多，比如登录请求，都会发到顶级上，非常局限。
-
并且css和js必须使用绝对路径，不然（相对路径）都会访问顶级上。副作用很大。
document.cookie，返回一个字符串,例如 "M9xo_2132_lastvisit=1437095802;BAIDU_DUP_lcr=https://www.baidu.com/;pgv_pvi=1186400050; __utmc=14869410;username=wsc"
cookie 是唯一可以服务端和客户端同时操作的东西，
比如一个请求发到服务端，服务端修改完告诉浏览器你也该改了。
同时用脚本也可以修改。
https://github.com/shy2850/xhcms_2014/blob/master/js/module/cookie.js
要精确的对 cookie 进行读取其实很简单,就是对字符串进行操作js全局对象
-
escape(string)可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
返回： 已编码的string 的副本。
其中某些字符被替换成了十六进制的转义序列。 -
stringObject.indexOf(searchvalue,fromindex)
可返回某个指定的字符串值在字符串对象中首次出现的位置。
fromindex规定开始检索的位置。它的合法取值是0到 stringObject.length - 1。
如省略该参数，则将从字符串的首字符开始检索。 -
toGMTString()可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。
-
HTML DOM Element 对象
注意
HTML 是对XML的扩展，但是不全，所以有时候要查XML DOM参考手册文档
-
.nextElementSiblingIE6不支持，但有.nextSibling跟前者等价。例，需要用.nextSibling写兼容【大坑】 - 如果前者是肯定意义直接返回前者，否则就返回后者。如此逻辑可以使用下面的方式：
return a || b//结果是精确的值，不是true、false,或运算的短路逻辑
var a=1,b=2; a || b //1
var a=0,b=2; a || b //2
var a=null,b=2; a || b //2 - 在父的最前和最末位置分别插入
parentNode.appendChild(newNode)
parentNode.insertBefore(newNode,parentNode.childNodes[0])//不用children（不包含空白的text节点）
after是有IE6兼容性问题的
removeNode//移除节点
cloneNode//复制节点 - 元素属性和css的操作
- case 表达式 原因？
- class操作
css操作，提倡修改class来修改样式
做一个忽闪忽闪的东西，可以锻炼思维
通过以下方式修改所有的css样式
main.style .backgroundColor = "red";
dom.style[name] = value;//name是变量时，就不能再【点】了
修改容易，获取.css样式表里的样式难：
getComputedStyle(main)[backgroundColor]
所以尽量不取.css里的样式进行对比。
25ke 1:08
事件，事件绑定的兼容见图片
- 事件绑定，比较复杂，杂乱。先选中，再绑定事件
行内属性赋值的方式
选中再赋值，只能赋值一次，也就是只能添加一个事件但是选中添加监听，可以绑定多个事件，不会修改或者覆盖，只会附加更多事件
mouseenter，是先离开再进入的时候，跟mouseleave相对
而mouseout ,是在其子元素上也会触发，。。。？
dblclick 双击。
mouseenter等这些IE6都不支持，因为不支持addEventListen(),要用attachEvent标准的this就是dom标签,非标准的则不是，需要处理一下,把this替换过来
在内部新创建个方法，执行的时候，把方法执行的主对像硬修改成dom,在dom上执行
listener.call(dom,event)//event 继续传递下去
等价于dom.listener()事件很混乱的时候，去掉一个，在对比，在修改。
新建的临时的变量就是前端的缓存方法。
事件代理
为啥阻止冒泡？如何阻止
点击子不连带着触发父绑定的事件方法-阻止冒泡，而IE6下不用阻止冒泡
停止事件传播：e.stopPropagation()为啥绑定到父上？
考虑性能消耗，如何一次绑定完全？还是要绑定上父上面
target 是真正被点击的子标签 ，非标准的则不是，log一下target，，怎么全删了？remove和removeChild的区别
e.target || e.srcElement分别代表（标准和IE浏览器）
25ke 01:53只是不从父main往上冒泡了,但是还会从子冒泡到他本身？
事件怎么全解绑了？
移除只能一个个移除，首先把事件函数缓存起来。
用for循环移除所有事件。没有统一的移除方法。
事件绑定原则
能只绑一遍，就不绑多遍，一次绑定，事件很金贵的
css小节
- 绝对定位的层级会较普通的高，但是使用relative的更高。可以用z-index调整
- 行内标签有float的可以设置宽高，总之脱离文档流的，都可以设置宽高
- 尽量使用百分比。
- 想对谁定位，要写，不然就是相对应body,
- 而且IE必须主动指定
left:0;top:0; -
overflow:hidden;或者line-height:0; - 把元素的所有style属性都改成默认的，方法：
inner.style.cssText = "";但是IE就不支持 - 样式表里要杜绝写id
25ke 02:16
星级评分自己动手写。
模拟下拉框
事件绑定和选取是最常用的功能，写的多了就是在写jquery这样的框架
少使用鼠标，多用键盘
26ke 25min
Q.create("div",{})?select.js
对象.getAttribute("")//获取所有属性：id type class name
或者对象.selected
必须是表单元素，才能直接.value,.selceted；
否则必须用.getAttribute("value")
.tagName.toUpCase() === 'A'//因为会自己解析出来就转成大写，所以才。。
ie6 不支持dispaly:block
ie6 下 option 是大写
总结
ctrl+d对网友收藏
云香水识的简书
云香水识的runjs.cn
d3.js
webGL
表单操作
27-10min
