1. 补全代码，要求：当鼠标放置在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>

思路：利用document.querySelector选择ct，img-preview，命名变量。再利用.addEventListener(" ",function(){ })添加事件，代码如下：

 <ul class="ct">
    <li data-img="https://upload-images.jianshu.io/upload_images/3624093-686aee09fe6332d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">鼠标放置查看图片1</li>
    <li data-img="https://upload-images.jianshu.io/upload_images/3624093-9b41b029ce86f390.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">鼠标放置查看图片2</li>
    <li data-img="https://upload-images.jianshu.io/upload_images/3624093-65b9217d7cb93f94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>

<script>
  var ct = document.querySelector(".ct");
  var preview = document.querySelector(".img-preview");
  ct.addEventListener('mouseover', function(e){
  var img = e.target.getAttribute("data-img");
  preview.innerHTML = '<img src="'+img+'">';
   });
</script>

demo预览

3. 完成node.classList.add,remove,toggle,contains的应用

var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active') //新增 class
nodeBox.classList.remove('active') //删除 class
nodeBox.classList.toggle('active') //新增/删除切换
node.classList.contains('active') // 判断是否拥有 class

demo预览

4.如何获取dom计算后的样式？

var node = document.querySelector('p')
var color =window.getComputedStyle(node).color
console.log(color)

5.写一个函数，批量操作css

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

function css(node,styleObj) {
    for (var key in styleObj) {
        node.style[key] = styleObj[key]
        }
 }

6. 列出DOM 元素选取的 API。以及如何创建，修改，添加元素。
   欸，算嘞算嘞~再写一篇吧