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

[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 ，可年后入职，年前入职可以补偿年终奖，因为不是招聘结点我就不放邮箱了，有兴趣私我哈）

[xcv58]

竟然直接操作 DOM ，这公司我不去。

[des]

这也难？你们都不是前端吧？
说监听事件多的什么情况？难道你们不知道事件冒泡机制？？
还有说闭包的，难道你们没考虑插入和删除会改变排序？

只不过计算是第几项，没有什么好办法，为了快速解决这个题目，我会选择遍历。

就这题目还能谷歌，你们要求也太低了吧？
如果换我，我也会觉得是在考验我使用 MBP 的能力，因为我也不会用， lol

[coolair]

有 google 可以写出任何代码，只要自己有思路

[halden]

招前端考原始 js 意义不大吧，现在做什么不都是用第三方库的

[sxd]

饿了么还考操作 dom 啊 不都用 Element 么 (手动滑稽

[des]

@des 想起来了，补充一下。
可以用 indexOf ，不过我应该会喜欢另一种方法，用 CSS 计数器

[Ahri]

可以 google 应该能做出来，不过这问题跟茴香豆的茴字有几种写法差不多，无用的知识。

[Felldeadbird]

这道题很简单啊，我这个后端看一眼就知道了。 当然，我是说用 JQ 的情况下。 23333 。不过用原生 JS 写，也没啥压力啊。面试过程如果时间不够，就不考虑兼容呗。

[ybh37]

百度就能搞定，还用 Google

[Mcatt]

好简单喔

[haocity]

var ul=document.getElementById('list');
ul.className+=' foo';
var li=ul.getElementsByTagName('li');
ul.removeChild(li[9]);
li[499].insertAdjacentHTML('afterend', '<li>v2ex.com </>');
for(var i =0, l = li.length; i < l; i++) { x(i)}
function x(i){
li[i].onclick =function(){alert(i)}
}
应该能兼容 IE6 ..还没实验

[ajan]

这题这么简单，还有 Mac 答题机器，答不上来对不住自己。

BTW ，我前些时间面试碰到有家鸟公司给了三页笔试题，题多得连答题的空间都没，在纸上写代码，真是日了狗了，记得有道题是 CSS 绘制他们公司的 logo, 很简单，但是连稿子或答题空间都不留，这垃圾公司，我坐了 2 分钟毅然离开。

[lynth]

@haocity 这样感觉不对 他 li 里面还嵌套了 li

[lynth]

@haocity var li=ul.querySelectorAll('#list>li'); 这样取 li 才是对的

[SilentDepth]

@ajan CSS 画 logo 确定不是他们美工塞的题？ 2333

[SilentDepth]

@lynth 如果只包含根级<ul>的<li>， children 就好了；如果要包含所有可能的<li>， querySelectorAll('li')。我觉得是后者

[Nutlee]

遍历操作 li ，同时把 li 索引缓存到自己身上，用事件委托绑定事件。。 是我想简单了么 ？？

[Rice]

@halden 这都意义不大……这就有点那个了！

[tomwei7]

我觉得我这个后端都能写出来，当然要靠 chrome console 强大的代码不全功能

[funnuy]

用 NodeIterator 写了一个