dom操作相关

[ibufu]

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

要求：使用原生JS

发现没有还没dom操作的问题，这道题是从https://www.v2ex.com/t/328943?p=1 这里抄来的。

[CHENSISISI]

// 点击li弹出第几项，不用es6，就是考察的闭包

        var dom = document.querySelectorAll('#list li');
        dom.forEach(function(dom, index) {

            (function(index) {
                dom.addEventListener('click', function(e) {
                    e.stopPropagation();
                    console.log(index);
                });
            }(index));

        });

[fulvaz]

不要给每个 li 都绑一个 listener

    ul.addEventListener('click', e => {
      e.stopPropagation()
      if (e.target.tagName.toLowerCase() === 'li')
      alert(e.target.classList)
    })

[YuanwuHu]

事件委托 弹窗显示其为当前列表中的第几项

   var list=document.getElementById('list');
   var aLi=list.getElementsByTagName('li');   
       list.addEventListener('click',function(e){
       var target=e.target || e.srcElement;
       if(target.nodeName.toLowerCase() === 'li'){
             for(var i=0,Len=aLi.length;i<Len;i++){
                        if(aLi[i] === target){
                                 alert(i);
                             }
                    }
           }
})

[ppphs]

@YuanwuHu 强迫症的我很想在alert(i);后面加个break; XD

[Stevenzwzhai]

@upfain 在第六个后面添加应该是let six = document.querySelectorAll('li')[5]吧

[zhangyongjie1997]

let ul = document.getElementById('ul');
ul.addEventListener('click',click,false)
function click(e) {
let arr = Array.prototype.slice.call(e.target.parentNode.children)
alert(arr.indexOf(e.target));
}

[ZHAISHENKING]

借用前面几位老哥的答案，整理一下：

/** 
 * 1. 为ul添加一个类bar
 * 2. 删除第10个li
 * 3. 在第5个li后边添加一个li,文字内容为insert
 * 4. 点击任意一个li弹窗显示其为当前列表中第几项
 */
let ul = document.getElementById('list');
let lis = document.getElementsByTagName('li');
// 添加类
ul.className += ' bar';

// 删除第10个li
lis[9].parentNode.removeChild(lis[9]);
// 第6个li后插入li
let tag = document.createElement('li');
tag.innerHTML = 'insert'
lis[6].parentNode.insertBefore(tag, lis[6])

// 点击
ul.addEventListener('click', e=>{
    e.stopPropagation();
    if (e.target.tagName.toLowerCase() === 'li'){
        let lis = document.getElementsByTagName('li');
        lis = [].slice.call(lis)
        alert(lis.indexOf(e.target))
    }
})