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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2884 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

第 1 条附言 · 2016-12-21 02:25:39 +08:00

原来没有私信功能啊 😂 地点在上海，邮箱 peiqiao.peng#ele.me 。

不能用第三方 DOM 辅助库哈，那就没意义了。

span

入职

奇技淫

私我哈

108 条回复 • 2017-01-07 02:18:47 +08:00

1 2

❮

❯

101

suniven

2016-12-22 21:36:12 +08:00

// 不知道我理解错题意了没有……求轻喷啊

function loopTargetAction(list, index, action) {
if(index === '*') {
for(var i = 0; i < list.length; i++) {
action(list[i], i)
}
} else {
action(list[index], index)
}
}

var uls = document.querySelectorAll('ul')

loopTargetAction(uls, '*', function(ulEl) {
ulEl.classList.add('bar')
})

var lis = document.querySelectorAll('li')

loopTargetAction(lis, 9, function(liEl) {
liEl.parentNode.removeChild(liEl)
})

loopTargetAction(lis, 498, function(liEl) {
var li = document.createElement('li')

li.textContent = '<v2ex.com />'
liEl.nextSibling.insertBefore(li)
})

loopTargetAction(lis, '*', function(liEl, index) {
liEl.addEventListener('click', function() {
alert(index)
}, false)
})