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
网友评论