1.補(bǔ)全代碼

//補(bǔ)全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片
<ul class="ct">
    <li data-img="https://upload-images.jianshu.io/upload_images/11954160-05547d1e09c0f0a0.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/690/format/webp">鼠標(biāo)放置查看圖片1</li>
    <li data-img="https://upload-images.jianshu.io/upload_images/11954160-c1669419f7ce32ae.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/690/format/webp">鼠標(biāo)放置查看圖片2</li>
    <li data-img="https://upload-images.jianshu.io/upload_images/11954160-a30ff2c16ab2c82d.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/690/format/webp">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>

<script>
  var ct = document.querySelector('.ct')   //選擇.ct
  var preview = document.querySelector('.img-preview')   //選擇.img-preview
  var image = document.createElement('img')   //新建一個(gè)img元素
  
  ct.addEventListener("mouseover",function(e){    //創(chuàng)建一個(gè)監(jiān)聽器監(jiān)聽是否在ct上有鼠標(biāo)放置
    if(e.target.tagName.toLowerCase() === 'li'){    //判斷鼠標(biāo)放置的位置是不是li標(biāo)簽
      image.src = e.target.getAttribute('data-img')    //如果是，就把image元素的src設(shè)置為對(duì)應(yīng)的li的data-img值
      preview.appendChild(image)   //再把image加到preview里面展示出來
    }
  })
  ct.addEventListener("mouseout",function(e){   //創(chuàng)建一個(gè)監(jiān)聽器當(dāng)ct上的監(jiān)聽鼠標(biāo)移開
    preview.removeChild(image)   //把image從preview里移除
  })
</script>

2.補(bǔ)全代碼

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

<ul class="ct">
    萬一ul內(nèi)有文字
    <li>這里是</li>
    <li>饑人谷</li>
</ul>

<script>
  var ct = document.querySelector('.ct')   //選擇ul
  ct.addEventListener('click', function(e){   //監(jiān)聽ct的鼠標(biāo)點(diǎn)擊
    if(e.target.tagName.toLowerCase() === 'li'){   //判斷點(diǎn)擊的是否是li
    console.log(e.target.innerText)   //是的就在控制臺(tái)輸出li里面的內(nèi)容
    }
  },false)
</script>

3.實(shí)現(xiàn)效果

實(shí)現(xiàn)此效果

<style>
  .box {
    padding: 20px;
    border: 2px solid #ccc;
    box-shadow: 1px 1px 2px 2px rgba(0,0,0,.3);
  }
  .box.active {
    background-color: #000;
    color: #fff;
  }
</style>

<div class="box">
  <h1>hello</h1>
  <h3>饑人谷</h3>
</div>
<button id="add">add</button>
<button id="remove">remove</button>
<button id="toggle1">toggle1</button>
<button id="toggle2">tolggle2</button>

<script>
var addBtn = document.querySelector('#add')
var removeBtn = document.querySelector('#remove')
var toggle1 = document.querySelector('#toggle1')
var toggle2 = document.querySelector('#toggle2')
var box = document.querySelector('.box')

addBtn.onclick = function(){
  box.classList.add('active')
}
removeBtn.onclick = function(){
  box.classList.remove('active')
}
toggle1.onclick = function(){
  if(box.classList.contains('active')){
    box.classList.remove('active')
  }else{
    box.classList.add('active')
  }
}
toggle2.onclick = function(){
  box.classList.toggle('active')
}
</script>

4.如何獲取 DOM 計(jì)算后的樣式

獲取樣式可以通過 getComputedStyle，得到的是最終在頁面上面繪制出來的樣式，這時(shí)候就不需要通過node.style屬性來獲取
比如 getComputedStyle(document.querySelector('.box')).fontSize  來獲取class為box的字體大小

5.寫一個(gè)函數(shù)，批量操作 css

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

function css(node, styleObj){
  for(var val in styleObj){
    node.style[val] = styleObj[val]   //循環(huán)，把['color']和['background-color']這類索引一一賦值
  }
}
css(document.body, {'color': 'red','background-color': '#ccc'})

6.列出DOM 元素選取的 API

getElementById()

getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。這也是獲取一個(gè)元素最快的方法
var element = document.getElementById("box");

getElementsByClassName()

getElementsByClassName方法返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection類型的對(duì)象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實(shí)時(shí)反映在返回結(jié)果中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
var elements = document.getElementsByClassName('tab');
getElementsByClassName方法的參數(shù)，可以是多個(gè)空格分隔的class名字，返回同時(shí)具有這些節(jié)點(diǎn)的元素。
document.getElementsByClassName('red test');

getElementsByTagName()

getElementsByTagName方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）。返回值是一個(gè)HTMLCollection對(duì)象，也就是說，搜索結(jié)果是一個(gè)動(dòng)態(tài)集合，任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
var paras = document.getElementsByTagName("p");
上面代碼返回當(dāng)前文檔的所有p元素節(jié)點(diǎn)。注意，getElementsByTagName方法會(huì)將參數(shù)轉(zhuǎn)為小寫后，再進(jìn)行搜索。

getElementsByName()

getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個(gè)NodeList格式的對(duì)象，不會(huì)實(shí)時(shí)反映元素的變化。

// 假定有一個(gè)輸入框是<input name="username">
var input = document.getElementsByName("username");
input[0].tagName 

注意，在IE瀏覽器使用這個(gè)方法，會(huì)將沒有name屬性、但有同名id屬性的元素也返回，所以name和id屬性最好設(shè)為不一樣的值。

querySelector()

querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
querySelector方法無法選中CSS偽元素。

querySelectorAll()

querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對(duì)象。NodeList對(duì)象不是動(dòng)態(tài)集合，所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中。
elementList = document.querySelectorAll(selectors);
querySelectorAll方法的參數(shù)，可以是逗號(hào)分隔的多個(gè)CSS選擇器，返回所有匹配其中一個(gè)選擇器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
上面代碼返回class屬性是note或alert的div元素

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

創(chuàng)建元素：creatElement('')
創(chuàng)建文本節(jié)點(diǎn)：creatTextNode('')
創(chuàng)建Frgment對(duì)象：creatDocumentFrgment('')
末尾添加元素：appendChild('')
替換元素：replaceChild('')
刪除元素：removeChild('')
設(shè)置屬性：setAttribute('')
刪除屬性：removeAttribute('')