1、 寫一個函數(shù)谢鹊，批量操作 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()方法。該方法接受兩個參數(shù)：需要取得計算樣式的元素和一個偽元素字符串（例":after"）。如果不需要偽元素信息壳咕，第二個參數(shù)為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()方法，不過他提供的另外一個方法可以實(shí)現(xiàn)我們想要的結(jié)果谓厘，這就是：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的區(qū)別属桦？

• onclick 只能綁定一個事件，綁定多個會產(chǎn)生覆蓋他爸；不能設(shè)置參數(shù)聂宾，使用默認(rèn)的事件冒泡階段。
• addEventListener中有第3個參數(shù)诊笤，attachEvent沒有系谐。第3個參數(shù)傳遞的是false或true。這個參數(shù)可選，默認(rèn)是false纪他。
  false--表示事件處理將在冒泡階段執(zhí)行鄙煤。
  true--表示事件處理將在捕獲階段執(zhí)行。
• 理論上茶袒，Event Listeners (addEventListener梯刚、attachEvent（IE使用 ）)可以無限增加事件監(jiān)聽給某個一元素。實(shí)際應(yīng)用的約束就是客戶端內(nèi)存的限制薪寓，這一點(diǎn)因每個瀏覽器而異亡资。

5、解釋DOM2事件傳播機(jī)制预愤？

當(dāng)事件發(fā)生在某個文檔節(jié)點(diǎn)上時（即事件目標(biāo)）沟于，目標(biāo)的事件處理程序就會被觸發(fā)。此外目標(biāo)的每個祖先節(jié)點(diǎn)也有機(jī)會處理該事件植康。

• 2級DOM的事件傳播包含三個階段:
  捕捉階段（capturing）旷太，事件從頂級文檔樹節(jié)點(diǎn)一級一級向下遍歷，直到到達(dá)該事件的目標(biāo)節(jié)點(diǎn)销睁。
  到達(dá)事件的目標(biāo)節(jié)點(diǎn)供璧，執(zhí)行目標(biāo)節(jié)點(diǎn)的時間處理程序。
  事件起泡（bubbling）冻记，事件從目標(biāo)節(jié)點(diǎn)一級一級向上上溯睡毒，直到頂級文檔樹節(jié)點(diǎn)。
• 相應(yīng)的冗栗，2級DOM通過下面的兩個函數(shù)給節(jié)點(diǎn)對象添加和刪除事件處理函數(shù)演顾。
  addEventListener(eventType, handler, propagate);
  removeEventListener(eventType, handler, propagate);
  三個參數(shù)意思分別如下:
  eventType: 即事件類型（不加on）。比如："click"隅居。
  handler: 事件處理函數(shù)钠至。傳入?yún)?shù)即為事件對象event。
  propagate: 是否只執(zhí)行捕獲和目標(biāo)節(jié)點(diǎn)兩個階段胎源。true的話棉钧，只執(zhí)行1，2兩個階段涕蚤；false的話宪卿，只指向2，3兩個階段万栅。
• IE的事件傳播只包含上邊的2和3兩個階段
  相應(yīng)的佑钾，IE通過下面兩個函數(shù)給節(jié)點(diǎn)對象添加和刪除事件處理函數(shù)。
  attachEvent(eventType, handler);
  detachEvent(eventType, handler);
  參數(shù)意思同2級DOM對應(yīng)的函數(shù)參數(shù)

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

<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、補(bǔ)全代碼邮偎，要求：

• 當(dāng)點(diǎn)擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素管跺，內(nèi)容為用戶輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
• 當(dāng)點(diǎn)擊每一個元素li時控制臺展示該元素的文本內(nèi)容禾进。

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>任務(wù)班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</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>

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

8豁跑、補(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>

<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>

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