1、 寫一個函數，批量操作 css

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

function css(node, styleObj){
  for(key in styleObj){
    node.style[key] = styleObj[key]
  }
}
css(document.body, {
  'color': 'red',
  'background-color': '#ccc'
})

2、如何獲取 DOM 計算后的樣式

可以使用document.defaultView提供的getComputedStyle()方法。該方法接受兩個參數：需要取得計算樣式的元素和一個偽元素字符串（例":after"）。如果不需要偽元素信息，第二個參數為null。代碼示例如下：

var node = document.getElementById("test");
var computedStyle = document.defaultView.getComputedStyle(node, null);

console.log(computedStyle.backgroundColor); 
console.log(computedStyle.width);                  
console.log(computedStyle.height);            
console.log(computedStyle.border); 

IE11以前的版本不支持getComputedStyle()方法，不過他提供的另外一個方法可以實現我們想要的結果，這就是：currentStyle。代碼示例如下：

var node = document.getElementById("test");
var computedStyle = node.currentStyle;

alert(computedStyle.backgroundColor); 
alert(computedStyle.width);                  
alert(computedStyle.height);            
alert(computedStyle.border); 

3、代碼效果

http://js.jirengu.com/zadoc/4/edit

4、 onlick與addEventListener的區別？

• onclick 只能綁定一個事件，綁定多個會產生覆蓋；不能設置參數，使用默認的事件冒泡階段。
• addEventListener中有第3個參數，attachEvent沒有。第3個參數傳遞的是false或true。這個參數可選，默認是false。
  false--表示事件處理將在冒泡階段執行。
  true--表示事件處理將在捕獲階段執行。
• 理論上，Event Listeners (addEventListener、attachEvent（IE使用 ）)可以無限增加事件監聽給某個一元素。實際應用的約束就是客戶端內存的限制，這一點因每個瀏覽器而異。

5、解釋DOM2事件傳播機制？

當事件發生在某個文檔節點上時（即事件目標），目標的事件處理程序就會被觸發。此外目標的每個祖先節點也有機會處理該事件。

• 2級DOM的事件傳播包含三個階段:
  捕捉階段（capturing），事件從頂級文檔樹節點一級一級向下遍歷，直到到達該事件的目標節點。
  到達事件的目標節點，執行目標節點的時間處理程序。
  事件起泡（bubbling），事件從目標節點一級一級向上上溯，直到頂級文檔樹節點。
• 相應的，2級DOM通過下面的兩個函數給節點對象添加和刪除事件處理函數。
  addEventListener(eventType, handler, propagate);
  removeEventListener(eventType, handler, propagate);
  三個參數意思分別如下:
  eventType: 即事件類型（不加on）。比如："click"。
  handler: 事件處理函數。傳入參數即為事件對象event。
  propagate: 是否只執行捕獲和目標節點兩個階段。true的話，只執行1，2兩個階段；false的話，只指向2，3兩個階段。
• IE的事件傳播只包含上邊的2和3兩個階段
  相應的，IE通過下面兩個函數給節點對象添加和刪除事件處理函數。
  attachEvent(eventType, handler);
  detachEvent(eventType, handler);
  參數意思同2級DOM對應的函數參數

6、有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端14班</li>
</ul>
<script>
//todo ...
</script>

方法一（利用閉包）：http://js.jirengu.com/kidog/1/edit?html,js,console,output
方法二（利用 this）：http://js.jirengu.com/tehuq/1/edit?js,console,output

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>

<script>
var ct=document.getElementsByClassName('ct')[0]
var addS=document.getElementById('btn-add-start')
var addE=document.getElementById('btn-add-end')
var lis=ct.getElementsByTagName('li')

function getEvent(){
  for(var i=0;i<lis.length;i++){
    lis[i].onclick=function(){
      console.log(this.innerHTML)
    }
  }
}
getEvent()

addS.onclick=function(){
  var ipt=document.getElementsByTagName('input')[0]
  if (ipt.value.replace(/(^s*)|(s*$)/g, "").length ==0) 
  {console.log('不能為空');return}
  var newLi=document.createElement('li')
  newLi.innerHTML=ipt.value
  ct.insertBefore(newLi,ct.firstChild)
  lis=ct.getElementsByTagName('li')
  getEvent()
}
addE.onclick=function(){
  var ipt=document.getElementsByTagName('input')[0]
  if (ipt.value.replace(/(^s*)|(s*$)/g, "").length ==0) 
  {console.log('不能為空');return}
  var newLi=document.createElement('li')
  newLi.innerHTML=ipt.value
  ct.appendChild(newLi)
  lis=ct.getElementsByTagName('li')
  getEvent()
}
</script>

預覽地址：http://js.jirengu.com/zacam/1/edit?html,js,console,output

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>

<script>
var lis=document.getElementsByTagName('li')
var ct=document.getElementsByClassName('img-preview')[0]
var img1=document.createElement('img')
ct.appendChild(img1)

for(var i=0;i<lis.length;i++){
  lis[i].onmouseover=function(){
    img1.src=this.getAttribute('data-img')
  }
}
</script>

預覽鏈接：http://js.jirengu.com/bagix/2/edit
方法二：利用事件代理
預覽鏈接：http://js.jirengu.com/duseb/3/edit?html,js,output