題目1: 寫一個函數(shù)，批量操作 css
function css(node, styleObj){
//todo ..
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})
題目2： 如何獲取 DOM 計算后的樣式
使用getComputedStyle獲取元素計算后的樣式
題目3： 實現(xiàn)此效果
題目4： onlick與addEventListener的區(qū)別？
- oncllick：綁定事件監(jiān)聽器，也是DOM0級事件監(jiān)聽方法。
優(yōu)點：簡單且具有跨瀏覽器優(yōu)勢。
缺點：通常將一個方法賦值給一個元素的事件處理程序?qū)傩裕簿鸵馕吨@個方法可以被新的方法覆蓋，一個時間只能綁定一次。
移除事件處理程序：只需把onclick屬性賦值為null即可。
btn.onclick = function(){} - addEventListener：是DOM2級事件處理程序。
能夠接受三個參數(shù)- 事件處理類型
- 事件處理方法
- 布爾參數(shù)（在不會階段調(diào)用事件處理程序為true，在事件冒泡階段處理為false）
優(yōu)點：能夠綁定多個處理程序，會按照順序依此執(zhí)行。
缺點：不具備跨瀏覽器優(yōu)勢。
移除事件處理程序：只能通過removeEventListener移除，移除時參數(shù)與添加的時候相同。
var btnClick = document.getElementById('btnClick');
var handler=function() {
alert(this.id);
}
btnClick.addEventListener('click', handler, false);
btnClick.removeEventListener('click', handler, false);
題目5： 解釋DOM2事件傳播機制？
DOM2級事件傳播機制包括三個階段
- 事件捕獲階段
- 處于目標(biāo)階段
- 事件冒泡階段
首先發(fā)生的是事件捕獲，為截取事件提供機會，然后是實際目標(biāo)接收事件，最后是冒泡階段
題目6：有如下代碼，要求當(dāng)點擊每一個元素<li>時控制臺展示該元素的文本內(nèi)容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端14班</li>
</ul>
<script>
//...
</script>
題目7： 補全代碼，要求：
- 當(dāng)點擊按鈕開頭添加時在
<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串；當(dāng)點擊結(jié)尾添加時在最后一個<li>元素后添加用戶輸入的非空字符串。 - 當(dāng)點擊每一個元素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>
預(yù)覽地址
題目8： 補全代碼，要求：當(dāng)鼠標(biāo)放置在<li>元素上，會在img-preview里展示當(dāng)前li元素的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>
預(yù)覽地址
