1.寫一個(gè)函數(shù)，批量操作 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 計(jì)算后的樣式
window.getComputedStyle()
行內(nèi)樣式（inline style）具有最高的優(yōu)先級(jí)，改變行內(nèi)樣式，通常會(huì)立即反映出來。但是，網(wǎng)頁(yè)元素最終的樣式是綜合各種規(guī)則計(jì)算出來的。因此，如果想得到元素現(xiàn)有的樣式，只讀取行內(nèi)樣式是不夠的，我們需要得到瀏覽器最終計(jì)算出來的那個(gè)樣式規(guī)則。
window.getComputedStyle方法，就用來返回這個(gè)規(guī)則。它接受一個(gè)DOM節(jié)點(diǎn)對(duì)象作為參數(shù)，返回一個(gè)包含該節(jié)點(diǎn)最終樣式信息的對(duì)象。所謂“最終樣式信息”，指的是各種CSS規(guī)則疊加后的結(jié)果。
var div = document.querySelector('div');
window.getComputedStyle(div).backgroundColor
getComputedStyle方法還可以接受第二個(gè)參數(shù)，表示指定節(jié)點(diǎn)的偽元素（比如:before、:after、:first-line、:first-letter等）。
var result = window.getComputedStyle(div, ':before');
注意點(diǎn)
- 返回的CSS值都是絕對(duì)單位，比如，長(zhǎng)度都是像素單位（返回值包括px后綴），顏色是rgb(#, #, #)或rgba(#, #, #, #)格式。
- CSS規(guī)則的簡(jiǎn)寫形式無效，比如，想讀取margin屬性的值，不能直接讀，只能讀marginLeft、marginTop等屬性。
- 如果一個(gè)元素不是絕對(duì)定位，top和left屬性總是返回auto。
- 該方法返回的樣式對(duì)象的cssText屬性無效，返回undefined。
- 該方法返回的樣式對(duì)象是只讀的，如果想設(shè)置樣式，應(yīng)該使用元素節(jié)點(diǎn)的style屬性。
3.實(shí)現(xiàn)效果
(http://js.jirengu.com/zexos/1/)
4.onlick與addEventListener的區(qū)別？
onlick
- 每個(gè)元素都有自己的事件處理程序?qū)傩?，這些屬性名稱通常為小寫，如onclick等，將這些屬性的值設(shè)置為一個(gè)函數(shù)，就可以指定事件處理程序
- 使用這個(gè)方法指定的監(jiān)聽函數(shù)，只會(huì)在冒泡階段觸發(fā)
- 同一個(gè)事件只能定義一個(gè)監(jiān)聽函數(shù)，也就是說，如果定義兩次onclick屬性，后一次定義會(huì)覆蓋前一次
- 所有瀏覽器都兼容
addEventListener
- addEventListener接受三個(gè)參數(shù)：事件類型、事件處理方法、布爾參數(shù)（如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false，則是在事件冒泡階段處理）
- 可以針對(duì)同一個(gè)事件，添加多個(gè)監(jiān)聽函數(shù)。
- 能夠指定在哪個(gè)階段（捕獲階段還是冒泡階段）觸發(fā)回監(jiān)聽函數(shù)。
- 除了DOM節(jié)點(diǎn)，還可以部署在window、XMLHttpRequest等對(duì)象上面，等于統(tǒng)一了整個(gè)JavaScript的監(jiān)聽函數(shù)接口。
5.解釋DOM2事件傳播機(jī)制？
當(dāng)一個(gè)事件發(fā)生以后，它會(huì)在不同的DOM節(jié)點(diǎn)之間傳播（propagation）。這種傳播分成三個(gè)階段：
第一階段：從window對(duì)象傳導(dǎo)到目標(biāo)節(jié)點(diǎn)，稱為“捕獲階段”（capture phase）。
第二階段：在目標(biāo)節(jié)點(diǎn)上觸發(fā)，稱為“目標(biāo)階段”（target phase）。
第三階段：從目標(biāo)節(jié)點(diǎn)傳導(dǎo)回window對(duì)象，稱為“冒泡階段”（bubbling phase）。
6.有如下代碼，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容
<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.補(bǔ)全代碼，要求：
- 當(dāng)點(diǎn)擊按鈕開頭添加時(shí)在<li>這里是</li>元素前添加一個(gè)新元素，內(nèi)容為用戶輸入的非空字符串；
- 當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在最后一個(gè) li 元素后添加用戶輸入的非空字符串.
當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。
參考鏈接
