1.寫一個函數，批量操作 css
function css(node, styleObj){
for(var key in styleObj){
node.style[key] = styleObj[key]
}
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})
2.如何獲取 DOM 計算后的樣式
window.getComputedStyle()
行內樣式（inline style）具有最高的優先級，改變行內樣式，通常會立即反映出來。但是，網頁元素最終的樣式是綜合各種規則計算出來的。因此，如果想得到元素現有的樣式，只讀取行內樣式是不夠的，我們需要得到瀏覽器最終計算出來的那個樣式規則。
window.getComputedStyle方法，就用來返回這個規則。它接受一個DOM節點對象作為參數，返回一個包含該節點最終樣式信息的對象。所謂“最終樣式信息”，指的是各種CSS規則疊加后的結果。
var div = document.querySelector('div');
window.getComputedStyle(div).backgroundColor
getComputedStyle方法還可以接受第二個參數，表示指定節點的偽元素（比如:before、:after、:first-line、:first-letter等）。
var result = window.getComputedStyle(div, ':before');
注意點
- 返回的CSS值都是絕對單位，比如，長度都是像素單位（返回值包括px后綴），顏色是rgb(#, #, #)或rgba(#, #, #, #)格式。
- CSS規則的簡寫形式無效，比如，想讀取margin屬性的值，不能直接讀，只能讀marginLeft、marginTop等屬性。
- 如果一個元素不是絕對定位，top和left屬性總是返回auto。
- 該方法返回的樣式對象的cssText屬性無效，返回undefined。
- 該方法返回的樣式對象是只讀的，如果想設置樣式，應該使用元素節點的style屬性。
3.實現效果
(http://js.jirengu.com/zexos/1/)
4.onlick與addEventListener的區別？
onlick
- 每個元素都有自己的事件處理程序屬性，這些屬性名稱通常為小寫，如onclick等，將這些屬性的值設置為一個函數，就可以指定事件處理程序
- 使用這個方法指定的監聽函數，只會在冒泡階段觸發
- 同一個事件只能定義一個監聽函數，也就是說，如果定義兩次onclick屬性，后一次定義會覆蓋前一次
- 所有瀏覽器都兼容
addEventListener
- addEventListener接受三個參數：事件類型、事件處理方法、布爾參數（如果是true表示在捕獲階段調用事件處理程序，如果是false，則是在事件冒泡階段處理）
- 可以針對同一個事件，添加多個監聽函數。
- 能夠指定在哪個階段（捕獲階段還是冒泡階段）觸發回監聽函數。
- 除了DOM節點，還可以部署在window、XMLHttpRequest等對象上面，等于統一了整個JavaScript的監聽函數接口。
5.解釋DOM2事件傳播機制？
當一個事件發生以后，它會在不同的DOM節點之間傳播（propagation）。這種傳播分成三個階段：
第一階段：從window對象傳導到目標節點，稱為“捕獲階段”（capture phase）。
第二階段：在目標節點上觸發，稱為“目標階段”（target phase）。
第三階段：從目標節點傳導回window對象，稱為“冒泡階段”（bubbling phase）。
6.有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端14班</li>
</ul>
<script>
var liArr = document.getElementsByClassName("ct")[0].getElementsByTagName("li");
for(var i = 0; i < liArr.length; i++){
liArr[i].addEventListener("click",function(){
console.log(this.innerText);
})
}
</script>
7.補全代碼，要求：
- 當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內容為用戶輸入的非空字符串；
- 當點擊結尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當點擊每一個元素li時控制臺展示該元素的文本內容。
參考鏈接
