DOM操作&事件操作

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时控制台展示该元素的文本内容。
参考链接

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

参考链接