十道面试测试题解析

此套题是某个公众号测试题目

1.关于position：absolute描述

1. 可以让span支持宽高
2. 会被float元素遮挡
3. 可以可视区计算left和top
4. 。。。。。撑起父元素

一看选项直接秒选A了，作为第一题出现，加上 position:absolute后，元素会被默认当成块级元素对待，脱离文档流也就是不被父元素监听，left和top就近absolute或者relative等position定位过的元素为准

---

2.错误的是

1. span浮动后，不设置宽度时回合父元素宽度保持一致
2. 怪异盒模型下一个设置width:200px，padding：0 10px;border：5px solid red;margin:20px;的div，实际内容宽带为170px
3. div默认和父元素一样宽
4. 默认，父元素只要足够宽，多个img可以一行

本题考察了两个盒子模型，和浮动流的问题，经常做开发用过浮动的人一眼就能看出A错误，不会影响宽度，至于标准盒模型，标准盒模型下盒子的大小 = content + border + padding + margin，怪异盒模型：box-sizing:border-box;padding和border在content内部，怪异盒模型下盒子的大小 = content （border + padding 包括）+ margin

---

3.结果

var bb = 1
function aa(bb){
	bb=2
	alert(bb)
}
aa(bb)
alert(bb)

考点就是bb的作用域问题，首先我们了解一下函数的执行上下文，首先声明arguments:bb=window.bb
argument.bb=2
所以结果2，1

---

4.输出的this指向

function() dosomething{
	console.log(this)
}

1. element.onclick = doSomething
2. element.onclick = function(){dosomething()}
3. 直接执行

一句话事件函数指向事件本身，函数this指向window
element window window

---

5.i的输出结果

for(var i = 0;i<5;i++) {
	setTimeout(function(){
		console.log(i)
	},500)
}

55555 预编译时候执行，var 生成的变量i无法分配给块级作用域

---

6.如何删除id 为box的span节点

document.removeChild(span)
box.removeChild(span)
box.remove(span）
document.remove(span)

remove(index)为移除本身，fatherNode.rem0oveChild(chidNode)移除子元素必须是子元素不能是子元素的子元素

---

7.下列不能取到ul的第0个li的是

ul.firstElementChid
ul.firstChid
ul.querySelector('li')
ul.children[0]

firstChild,lastChild,previousSibling,nextSibling返回全部元素包括空格回车文本等B错
firstElementChild是firstChild的元素节点版本
children 属性返回元素的子元素的集合
childNodes 属性返回所有的节点，包括文本节点、注释节点；

---

8.事件代理基本应用

1. 把事件处理添加在子集
2. 只能把事件处理添加在body上
3. 只能把事件处理添加在HTML上
4. 把时间处理添加在祖父级

js事件委托也叫事件代理，实际上事件委托就是通过事件冒泡实现的，所谓的事件就是onclick，onmouseover，ondown等等，那么委托呢？委托就是指本来这个事是要你自己做的，但是你却让别人帮你完成这个事，这就叫事件委托。

下面是典型的事件代理查找元素

var ul = document.getElementById("ul");
var li = ul.getElementsByTagName("li");
ul.onmouseover = function(event){
    // 兼容Ie
    var event = event || window.event;
    // 获取最具体的元素
    var target = event.srcElement || event.target;
    // 判断这个元素是不是ul，如果是的话就不给它添加背景，需要我们只是需要给li添加
    if(target.nodeName.toLowerCase()!=="ul"){
        target.style.backgroundColor = "red";
    }
}
ul.onmouseout = function(event){
    var event = event || window.event;
    var target = event.srcElement || event.target;
    if(target.nodeName.toLowerCase()!=="ul"){
        target.style.backgroundColor = "";
    }
}
var btn = document.getElementById("btn");
btn.onclick = function(){
    var createLi = document.createElement("li");
    createLi.innerHTML = "我是新添加的li";
    ul.appendChild(createLi);
}

---

9.不是时间代理优点的是

1. 可以为将来的元素添加事件处理
2. 减少内存消耗
3. 不用查找元素
4. 减少事件注册

同上，减少事件注册就减少了内存的消耗