记一次新浪前端面试（一）

目录

记一次新浪前端面试（一）

题目一：

考察到的知识点：

具体讲解：

---

记一次新浪前端面试（一）

今天上去十点半到新浪总部大厦面试前端岗，整理一下面试题以及自我感悟。

题目一：

给出下列代码，要求点击对应li标签的时候，标签中相应的内容会+1； 

但给出的代码有不合理和不对的地方，请指出，并给出正确代码。

    <div>
		<ul>
			<li class="btn">1</li>
			<li class="btn">2</li>
			<li class="btn">3</li>
			<li class="btn">4</li>
			<li class="btn">5</li>
			<li class="btn">6</li>
			<li class="btn">7</li>
			<li class="btn">8</li>
			<li class="btn">9</li>
			<li class="btn">10</li>
		</ul>
	</div>
	<script type="text/javascript">
		var btn =document.getElementsByTagName('li');
		for (var i = 0; i < 10; i++) {
			btn[i].onclick =function() {
				this.innerHTML +=1;
			}		}
	</script>

 

考察到的知识点：

（1）事件代理

（2）DOM获取节点的操作

（3）innerHTML 和 innerValue的区别

具体讲解：

首先，检查给出的示例代码，找出其中错误的地方。

1）var btn =document.getElementsByTagName('btn');这样获取不到指定元素的

获取DOM中元素的方法有一下几种：

getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。 接受字符串*表示所有名称
getElementsByTagName()	返回带有指定标签名的对象集合。 按照HTML中排列的顺序

2） this.innerHTML方法返回 此标签开始与结束标签框之前的HTML代码，其返回类型为string；

       this.value是表单元素的属性值

       this.innerTEXT方法返回标签中的可显示文本

// sting + num 会执行隐式转换，将num转换为string， '+'作为连接符号返回生成的字符串
this.innerHTML +=1 

 其次，不合理的地方在于对于每一个子元素都挂载了事件处理程序，这里可以用事件委托优化代码。

我们为什么要用事件委托？出于性能优化考虑。a) 我们在书写代码的时候，要尽量减少DOM操作和添加事件处理程序，来尽可能降低浏览器的重排（Reflow）和重绘（Repaint）。b）定义过多的对象会对内存产生负担。

这个时候可以把子元素的事件处理程序挂载到父元素上，利用事件冒泡到父元素时处理相应的事件。

实现代码：

//这里给ul标签添加了一个类，也可以使用document.getElementsByTagName('ul').shift()表示
let ul =document.getElementById('evenyProxy');
//event.target 表示点击事件本身发生的目标
ul.addEventListener('click', event=>{
	event.target.innerHTML = parseInt(event.target.innerHTML)+1;
})