補(bǔ)全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。

<ul class="ct">
    <li data-img="1.png">鼠標(biāo)放置查看圖片1</li>
    <li data-img="2.png">鼠標(biāo)放置查看圖片2</li>
    <li data-img="3.png">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代碼
</script>

  <ul class="ct">
    <li data-img="https://upload-images.jianshu.io/upload_images/3624093-686aee09fe6332d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">鼠標(biāo)放置查看圖片1</li>
    <li data-img="https://upload-images.jianshu.io/upload_images/3624093-9b41b029ce86f390.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">鼠標(biāo)放置查看圖片2</li>
    <li data-img="https://upload-images.jianshu.io/upload_images/3624093-65b9217d7cb93f94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">鼠標(biāo)放置查看圖片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>

有如下代碼，要求當(dāng)點(diǎn)擊每一個元素li時控制臺展示該元素的文本內(nèi)容。不考慮兼容。

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
</ul>
<script>
    
</script>

<ul class="ct">
      <li>這里是</li>
      <li>饑人谷</li>
  </ul>
  <script>
    var ct=document.getElementsByClassName("ct")[0];
    // 注意此處的[0]必須要有，不然沒有效果；
    ct.addEventListener('click',function(e){  console.log(e.target.innerText)
                        })
    
  </script>

實現(xiàn)此效果。

代碼：http://js.jirengu.com/silel/2/
效果：http://js.jirengu.com/silel

如何獲取 DOM 計算后的樣式？

使用 getComputedStyle 獲取元素計算后的樣式，例：

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

寫一個函數(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];
  }
}
css(document.body, {
  'color': 'red',
  'background-color': '#ccc'
});

列出DOM 元素選取的 API。

getElementById() // 獲取指定 ID 的元素，若沒有匹配的節(jié)點(diǎn)則返回 null
getElementsByClassName() // 獲取指定 ClassName 的元素
getElementsByTagName() // 獲取指定標(biāo)簽的元素
getElementsByName() // 獲取擁有 name 屬性的元素
querySelector() // 獲取指定 CSS 選擇器的節(jié)點(diǎn)，若有多個則返回第一個，若沒有匹配節(jié)點(diǎn)，則返回 null
querySelectorAll() // 獲取指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對象

如何創(chuàng)建元素？如何添加元素？

• 創(chuàng)建元素

1.createElement()
createElement方法用來生成HTML元素節(jié)點(diǎn)。

var newDiv = document.createElement("div");

createElement方法的參數(shù)為元素的標(biāo)簽名，即元素節(jié)點(diǎn)的tagName屬性。如果傳入大寫的標(biāo)簽名，會被轉(zhuǎn)為小寫。如果參數(shù)帶有尖括號（即<和>）或者是null，會報錯。
2.createTextNode()
createTextNode方法用來生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

上面代碼新建一個div節(jié)點(diǎn)和一個文本節(jié)點(diǎn)
3.createDocumentFragment()
createDocumentFragment方法生成一個DocumentFragment對象。

var docFragment = document.createDocumentFragment();

DocumentFragment對象是一個存在于內(nèi)存的DOM片段，但是不屬于當(dāng)前文檔，常常用來生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當(dāng)前文檔。這樣做的好處在于，因為DocumentFragment不屬于當(dāng)前文檔，對它的任何改動，都不會引發(fā)網(wǎng)頁的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)。

• 添加元素

1.appendChild() 在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

2.insertBefore()
在某個元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

3.replaceChild()
replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素

newDiv.replaceChild(newElement, oldElement);