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

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

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

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

[suniven]

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

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)
})

[sebaogege]

添加一个类 bar 是什么意思

[Tonni]

稍微改了下，应该满足需求了，之前没看仔细 ;-)。

[xwartz]

类 bar 是什么鬼？ className ？

[tushiner]

对于我来说，难点在于玩不转 MBP 。。说正题，除了节点后插入新节点没有现成的 API 以外，其他几个题目，无论是用 CSS 选择器或者遍历节点的方式，都能找到目标元素完成相关操作。所以，此组题目的考点分为至少两层，即 DOM 相关 API 熟悉程度与高性能的 DOM 操作技巧。

[cleveryun]

看了评论一圈，写了个答案，试了下应该没问题。另外，我这里不涉及字符串转码，看了各位用 html 而非 text 的，其实只用把“<”这个符号转成“&lt;”就可以了，其他的比如“>”是没必要转的^_^。
https://github.com/Yakima-Teng/memo#dom 基础

[cleveryun]

上面的链接地址后面有“基础”两个字的，被 V2EX 给分开了，要加上才能定位到正确的位置。

[Lothar]

@cleveryun 写的很赞，目前最靠谱的答案了，细节再小改下就行