1.写一个函数，批量操作 css
function css(node, styleObj){
for(var key in styleObj){
node.style[key] = styleObj[key]
}
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})
2.如何获取 DOM 计算后的样式
window.getComputedStyle()
行内样式（inline style）具有最高的优先级，改变行内样式，通常会立即反映出来。但是，网页元素最终的样式是综合各种规则计算出来的。因此，如果想得到元素现有的样式，只读取行内样式是不够的，我们需要得到浏览器最终计算出来的那个样式规则。
window.getComputedStyle方法，就用来返回这个规则。它接受一个DOM节点对象作为参数，返回一个包含该节点最终样式信息的对象。所谓“最终样式信息”，指的是各种CSS规则叠加后的结果。
var div = document.querySelector('div');
window.getComputedStyle(div).backgroundColor
getComputedStyle方法还可以接受第二个参数，表示指定节点的伪元素（比如:before、:after、:first-line、:first-letter等）。
var result = window.getComputedStyle(div, ':before');
注意点
- 返回的CSS值都是绝对单位，比如，长度都是像素单位（返回值包括px后缀），颜色是rgb(#, #, #)或rgba(#, #, #, #)格式。
- CSS规则的简写形式无效，比如，想读取margin属性的值，不能直接读，只能读marginLeft、marginTop等属性。
- 如果一个元素不是绝对定位，top和left属性总是返回auto。
- 该方法返回的样式对象的cssText属性无效，返回undefined。
- 该方法返回的样式对象是只读的，如果想设置样式，应该使用元素节点的style属性。
3.实现效果
(http://js.jirengu.com/zexos/1/)
4.onlick与addEventListener的区别？
onlick
- 每个元素都有自己的事件处理程序属性，这些属性名称通常为小写，如onclick等，将这些属性的值设置为一个函数，就可以指定事件处理程序
- 使用这个方法指定的监听函数，只会在冒泡阶段触发
- 同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次
- 所有浏览器都兼容
addEventListener
- addEventListener接受三个参数：事件类型、事件处理方法、布尔参数（如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理）
- 可以针对同一个事件，添加多个监听函数。
- 能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发回监听函数。
- 除了DOM节点，还可以部署在window、XMLHttpRequest等对象上面，等于统一了整个JavaScript的监听函数接口。
5.解释DOM2事件传播机制？
当一个事件发生以后，它会在不同的DOM节点之间传播（propagation）。这种传播分成三个阶段：
第一阶段：从window对象传导到目标节点，称为“捕获阶段”（capture phase）。
第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
第三阶段：从目标节点传导回window对象，称为“冒泡阶段”（bubbling phase）。
6.有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端14班</li>
</ul>
<script>
var liArr = document.getElementsByClassName("ct")[0].getElementsByTagName("li");
for(var i = 0; i < liArr.length; i++){
liArr[i].addEventListener("click",function(){
console.log(this.innerText);
})
}
</script>
7.补全代码，要求：
- 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；
- 当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。
参考链接
