DOM & 事件

前言

 之前讲都是js的纯基本语法，表达式啥的，跟浏览器无关，可以使用node和控制台执行；
 往后讲的只有浏览器里才会有。

HTML的加载顺序

• 从上到下，从外到里依次加载
• js的三种引入方式
  1. 内联<script>
  2. 行内属性上写
  3. 外链.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结构的操作

1. 对象引用，相当于拉了个线，
   === 对象类型等完全一样，如果不是基础类型（字符串，数字），那就是同一个东西，修改一个另一个也会修改。
2. 集合不是数组，但类数组。
   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全局对象

  1. escape(string)可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
     返回： 已编码的string 的副本。
     其中某些字符被替换成了十六进制的转义序列。
  2. stringObject.indexOf(searchvalue,fromindex)
     可返回某个指定的字符串值在字符串对象中首次出现的位置。
     fromindex规定开始检索的位置。它的合法取值是0到 stringObject.length - 1。
     如省略该参数，则将从字符串的首字符开始检索。
  3. toGMTString() 可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。

HTML DOM Element 对象

注意
HTML 是对XML的扩展，但是不全，所以有时候要查XML DOM参考手册文档

1. .nextElementSibling IE6不支持，但有.nextSibling跟前者等价。例，需要用.nextSibling写兼容【大坑】
2. 如果前者是肯定意义直接返回前者，否则就返回后者。如此逻辑可以使用下面的方式：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
3. 在父的最前和最末位置分别插入
   parentNode.appendChild(newNode)
parentNode.insertBefore(newNode,parentNode.childNodes[0])//不用children（不包含空白的text节点）
   after是有IE6兼容性问题的
   removeNode //移除节点
   cloneNode //复制节点
4. 元素属性和css的操作
   • case 表达式 原因？
   • class操作
     css操作，提倡修改class来修改样式
     做一个忽闪忽闪的东西，可以锻炼思维
     通过以下方式修改所有的css样式
     main.style .backgroundColor = "red";
     dom.style[name] = value;//name是变量时，就不能再【点】了
     修改容易，获取.css样式表里的样式难：
     getComputedStyle(main)[backgroundColor]
     所以尽量不取.css里的样式进行对比。

25ke 1:08

事件，事件绑定的兼容见图片

• 事件绑定，比较复杂，杂乱。先选中，再绑定事件

  1. 行内属性赋值的方式
     选中再赋值，只能赋值一次，也就是只能添加一个事件

  2. 但是选中添加监听，可以绑定多个事件，不会修改或者覆盖，只会附加更多事件
     mouseenter，是先离开再进入的时候，跟mouseleave相对
     而mouseout ,是在其子元素上也会触发，。。。？
     dblclick 双击。
     mouseenter等这些IE6都不支持，因为不支持addEventListen(),要用attachEvent

  3. 标准的this就是dom标签,非标准的则不是，需要处理一下,把this替换过来
     在内部新创建个方法，执行的时候，把方法执行的主对像硬修改成dom,在dom上执行
     listener.call(dom,event)//event 继续传递下去
     等价于dom.listener()

  4. 事件很混乱的时候，去掉一个，在对比，在修改。

  5. 新建的临时的变量就是前端的缓存方法。

事件代理

1. 为啥阻止冒泡？如何阻止
   点击子不连带着触发父绑定的事件方法-阻止冒泡，而IE6下不用阻止冒泡
   停止事件传播：e.stopPropagation()

2. 为啥绑定到父上？
   考虑性能消耗，如何一次绑定完全？还是要绑定上父上面
   target 是真正被点击的子标签 ，非标准的则不是，log一下target，，怎么全删了？remove和removeChild的区别
   e.target || e.srcElement 分别代表（标准和IE浏览器）
   25ke 01:53

3. 只是不从父main往上冒泡了,但是还会从子冒泡到他本身？

4. 事件怎么全解绑了？
   移除只能一个个移除，首先把事件函数缓存起来。
   用for循环移除所有事件。没有统一的移除方法。

事件绑定原则

能只绑一遍，就不绑多遍，一次绑定，事件很金贵的

css小节

1. 绝对定位的层级会较普通的高，但是使用relative的更高。可以用z-index调整
2. 行内标签有float的可以设置宽高，总之脱离文档流的，都可以设置宽高
3. 尽量使用百分比。
4. 想对谁定位，要写，不然就是相对应body,
5. 而且IE必须主动指定left:0;top:0;
6. overflow:hidden;或者line-height:0;
7. 把元素的所有style属性都改成默认的，方法：inner.style.cssText = "";但是IE就不支持
8. 样式表里要杜绝写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