DOM操作

1、写一个函数，批量操作 css

function css(node, styleObj){
//todo ..
}
css(document.body, {
  'color': 'red',
  'background-color': '#ccc'
})

function css(node, styleObj){
  for(key in styleObj){
    node.style[key] = styleObj[key]
  }
}
css(document.body, {
  'color': 'red',
  'background-color': '#ccc'
})

2、如何获取 DOM 计算后的样式

可以使用document.defaultView提供的getComputedStyle()方法。该方法接受两个参数：需要取得计算样式的元素和一个伪元素字符串（例":after"）。如果不需要伪元素信息，第二个参数为null。代码示例如下：

var node = document.getElementById("test");
var computedStyle = document.defaultView.getComputedStyle(node, null);

console.log(computedStyle.backgroundColor); 
console.log(computedStyle.width);                  
console.log(computedStyle.height);            
console.log(computedStyle.border);

IE11以前的版本不支持getComputedStyle()方法，不过他提供的另外一个方法可以实现我们想要的结果，这就是：currentStyle。代码示例如下：

var node = document.getElementById("test");
var computedStyle = node.currentStyle;

alert(computedStyle.backgroundColor); 
alert(computedStyle.width);                  
alert(computedStyle.height);            
alert(computedStyle.border);

3、代码效果

http://js.jirengu.com/zadoc/4/edit

4、 onlick与addEventListener的区别？

onclick 只能绑定一个事件，绑定多个会产生覆盖；不能设置参数，使用默认的事件冒泡阶段。
addEventListener中有第3个参数，attachEvent没有。第3个参数传递的是false或true。这个参数可选，默认是false。
false--表示事件处理将在冒泡阶段执行。
true--表示事件处理将在捕获阶段执行。
理论上，Event Listeners (addEventListener、attachEvent（IE使用）)可以无限增加事件监听给某个一元素。实际应用的约束就是客户端内存的限制，这一点因每个浏览器而异。

5、解释DOM2事件传播机制？

当事件发生在某个文档节点上时（即事件目标），目标的事件处理程序就会被触发。此外目标的每个祖先节点也有机会处理该事件。

2级DOM的事件传播包含三个阶段:
捕捉阶段（capturing），事件从顶级文档树节点一级一级向下遍历，直到到达该事件的目标节点。
到达事件的目标节点，执行目标节点的时间处理程序。
事件起泡（bubbling），事件从目标节点一级一级向上上溯，直到顶级文档树节点。
相应的，2级DOM通过下面的两个函数给节点对象添加和删除事件处理函数。
addEventListener(eventType, handler, propagate);
removeEventListener(eventType, handler, propagate);
三个参数意思分别如下:
eventType: 即事件类型（不加on）。比如："click"。
handler: 事件处理函数。传入参数即为事件对象event。
propagate: 是否只执行捕获和目标节点两个阶段。true的话，只执行1，2两个阶段；false的话，只指向2，3两个阶段。
IE的事件传播只包含上边的2和3两个阶段
相应的，IE通过下面两个函数给节点对象添加和删除事件处理函数。
attachEvent(eventType, handler);
detachEvent(eventType, handler);
参数意思同2级DOM对应的函数参数

6、有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容


    这里是
    饥人谷
    前端14班

方法一（利用闭包）：http://js.jirengu.com/kidog/1/edit?html,js,console,output
方法二（利用 this）：http://js.jirengu.com/tehuq/1/edit?js,console,output

7、补全代码，要求：

当点击按钮开头添加时在
这里是
当点击每一个元素li时控制台展示该元素的文本内容。


    这里是
    饥人谷
    任务班

预览地址：http://js.jirengu.com/zacam/1/edit?html,js,console,output

8、补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。


    鼠标放置查看图片1
    鼠标放置查看图片2
    鼠标放置查看图片3

预览链接：http://js.jirengu.com/bagix/2/edit
方法二：利用事件代理
预览链接：http://js.jirengu.com/duseb/3/edit?html,js,output