1. 補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前l(fā)i元素的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.寫一個函數(shù)，批量操作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。以及如何創(chuàng)建，修改，添加元素。
   欸，算嘞算嘞~再寫一篇吧