题目1: 写一个函数，批量操作 css
function css(node, styleObj){
//todo ..
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})
//方法:
function setStyle(node, styleObj) {
//for-in 遍历对象
for (var key in styleObj) {
node.style[key] = styleObj[key]
}
}
题目2： 如何获取 DOM 计算后的样式
var ele = document.querySelector('p')
var color = window.getComputedStyle(ele).color
var color = ele.style.color
ele.style.cssText = 'border-color:red;color:red;';
console.log(color)
题目3 : 实现以下效果
题目4： onlick与addEventListener的区别？
- DOM0
- DOM0级事件监听就是把一个方法赋值给一个元素的事件处理程序属性。将这些属性的值设置为一个函数，就可以指定事件处理程序。
- 一个事件只能绑定一次，并且新方法会覆盖老方法。
btn.onclick=function(){}
- DOM2
- DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
addEventListener removeEventListener所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
- 事件类型
- 事件处理方法
- 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理
- 函数执行几次都可以,不会覆盖
题目5： 解释DOM2事件传播机制？
- DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
题目6：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端14班</li>
</ul>
<script>
//todo ...
var ct = document.querySelector(".ct")
ct.addEventListener('click',function(e){
console.log(e.target.innerText)
});
</script>
题目7： 补全代码，要求：
- 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
- 当点击每一个元素li时控制台展示该元素的文本内容。
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
</script>
题目8： 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<ul class="ct">
<li data-img="1.png">鼠标放置查看图片1</li>
<li data-img="2.png">鼠标放置查看图片2</li>
<li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
</script>
