分享一道简单的前端面试题

[Lothar]

<ul id="list" class="foo">
  <li>#0</li>
  <li><span>#1</span></li>
  <li>#2</li>
  <li>#3</li>
  <li><ul><li>#4</li></ul></li>
  ...
  <li><a href="//v2ex.com">#99998</a></li>
  <li>#99999</li>
  <li>#100000</li>
</ul>

• 为 <ul> 添加一个类 bar
• 删除第 10 个 <li>
• 在第 500 个 <li> 后面增加一个 <li> , 其文字内容为 <v2ex.com />
• 点击任意 <li> 弹窗显示其为当前列表中的第几项。

---

最近又来了个资深工程师面试，结果现场写代码环节写不出上面类似的题目。🌚

讲道理这题真的不难啊，就是简单的 DOM 操作，没有任何奇技淫巧，现场写：一台 MBP / 30 分钟 / 允许 Google ，只要基本功够扎实应该都能写出来吧。

其实现场考的版本比这个还简单，这个是为了发帖稍微整理后的版本，大家来喷一波。

---

(顺便补个广告，招前端，薪资对标阿里 P6 ，可年后入职，年前入职可以补偿年终奖，因为不是招聘结点我就不放邮箱了，有兴趣私我哈）

[MrFireAwayH]

@bramblex 活捉我家 Kevin 酱~

[ljcarsenal]

刚想看看是哪个公司 发现有前同事在你厂

[lijsh]

sofish 以前也发过一个笔试题，比这个更简单：

https://gist.github.com/sofish/3549460

[lijsh]

上面的题目是： js 中如何获得 <ul> 下的第一个 <li>

[dxcqcv]

第 3 道挺难的，我也超过时间了，果然还是技术不行

贴一波答案

```javascript
var u = document.querySelector('.foo');
u.classList.add('bar');
var li = u.querySelectorAll('li');
console.log(li.length);


li[9].parentNode.removeChild(li[9]);
var t = '&lt;v2ex.com />';
li[499].insertAdjacentHTML('afterend','<li>'+t+'</li>');

for(var i =0, l = li.length; i < l; i++) {
(function(i){

li[i].onclick =function(){

alert(i)
} ;
}(i))
}
```

最后贴个简历，(简历地址)[https://dxcqcv.github.io/resume/html/index.html], 楼主招不招中级前端，哈哈

[otakustay]

这题就是个应届生级别，有 querySelector 直接上 nth-child 没有就 for 一把的事情……

[kisnows]

P6 对应的是级别是 资深 呀。
那 P5 对应的是 高级 ？

[wmc]

校招题目都比这难了。。。😂

[alvie]

作为一个后端工程师表示都会做...

[wly19960911]

这难度几乎没有吧，考察了几个 dom 操作，上面说会超过时间我明天看看，不知道会不会超过时间，毕竟标签这么多，原来做过一个很垃圾的代码整个运行效率都被脱累过。。

[byenow]

@dxcqcv 中级前端不会给 500 个 DOM 绑定事件吧（逃

[murmur]

考点难道是 IE8/9 下不能直接删除元素必须先找到元素然后用父节点删子节点？

[oglop]

我觉得这道题的内涵在于测试面试者如何自举翻 wall 上 google

[wdhwg001]

内啥… V2EX 没有私信功能…

[Lothar]

@oglop 公司网络自带梯子哈

[Lothar]

@wdhwg001 感谢提醒 😂😂😂

[skydiver]

这题目我一个后端都会…

[emric]

题目不错， ie9+ 还算简单。

1. classList
2, 3. list.children or querySelector + css
4. 事件委托 + indexOf + 阻止冒泡

[DWabo]

我一个学了 2 个月的初级前端也能做出来。

[justyy]

可以 google 根本就不难。我记不住，但是我会用 google, 三两下就能找到答案。。
问题是 国内面试的时候 能上 google 么？