V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Lothar
V2EX  ›  程序员

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

  •  
  •   Lothar ·
    ppq1991 · 2016-12-20 17:29:17 +08:00 · 15779 次点击
    这是一个创建于 2921 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <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 辅助库哈,那就没意义了。
    108 条回复    2017-01-07 02:18:47 +08:00
    1  2  
    suniven
        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)
    })
    sebaogege
        102
    sebaogege  
       2016-12-22 23:58:00 +08:00
    添加一个类 bar 是什么意思
    Tonni
        103
    Tonni  
       2016-12-24 20:40:24 +08:00
    稍微改了下,应该满足需求了,之前没看仔细 ;-)。
    xwartz
        104
    xwartz  
       2016-12-24 22:20:40 +08:00
    类 bar 是什么鬼? className ?
    tushiner
        105
    tushiner  
       2016-12-28 17:41:36 +08:00
    对于我来说,难点在于玩不转 MBP 。。说正题,除了节点后插入新节点没有现成的 API 以外,其他几个题目,无论是用 CSS 选择器或者遍历节点的方式,都能找到目标元素完成相关操作。所以,此组题目的考点分为至少两层,即 DOM 相关 API 熟悉程度与高性能的 DOM 操作技巧。
    cleveryun
        106
    cleveryun  
       2017-01-06 16:49:25 +08:00
    看了评论一圈,写了个答案,试了下应该没问题。另外,我这里不涉及字符串转码,看了各位用 html 而非 text 的,其实只用把“<”这个符号转成“&lt;”就可以了,其他的比如“>”是没必要转的^_^。
    https://github.com/Yakima-Teng/memo#dom 基础
    cleveryun
        107
    cleveryun  
       2017-01-06 16:51:40 +08:00
    上面的链接地址后面有“基础”两个字的,被 V2EX 给分开了,要加上才能定位到正确的位置。
    Lothar
        108
    Lothar  
    OP
       2017-01-07 02:18:47 +08:00
    @cleveryun 写的很赞,目前最靠谱的答案了,细节再小改下就行
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1617 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 16:48 · PVG 00:48 · LAX 08:48 · JFK 11:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.