一道饿了么前端面试题

作者: bigggge | 来源:发表于2017-02-25 15:22 被阅读622次

一道饿了么前端面试题
知乎专栏
vue(6) - 收藏集 - 掘金
前端UI框架
nodejs 学习指南
Element UI
饿了么，饿了......
前端面试宝典之：parseInt的陷阱
2019-08-10
饿了么？ - 草稿

<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> 弹窗显示其为当前列表中的第几项。

答案：

<body>

<ul id="list" class="foo">

</ul>

<script>
    var list = document.getElementById('list')

    void function () {
        var html = ''
        for (var i = 0; i <= 550; i++) {
            if (i === 1) {
                html += '<li><span>#1</span></li>'
            } else if (i === 4) {
                html += '<li><ul><li>#4</li></ul></li>'
            } else {
                html += '<li>#' + i + '</li>'
            }
        }
        list.innerHTML = html
    }()

    list.className += ' bar'

    var li10 = document.querySelector('#list > li:nth-of-type(10)')
    li10.parentNode.removeChild(li10)
    li10.remove()

    var li = document.createElement('LI')
    var textNode = document.createTextNode('<v2ex.com />')
    li.appendChild(textNode)

    var li501 = document.querySelector('#list > li:nth-of-type(501)')
    list.insertBefore(li, li501)

    list.addEventListener('click', function (e) {
        var target = e.target || e.srcElement

        while (target.nodeName !== 'LI') {
            target = target.parentNode
        }

        var children = target.parentNode.childNodes

        var count = 0
        for (var i = 0, len = children.length; i < len; i++) {
            var node = children[i]
            if (node.nodeName === 'LI') {
                count++
            }
            if (node === target) {
                alert('是当前第' + count + '项')
                break
            }
        }
    }, false)

</script>
</body>