dom操作相关 about frontend-interview HOT 7 OPEN

// 点击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));

        });

from frontend-interview.

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

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

from frontend-interview.

不要给每个 li 都绑一个 listener

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

from frontend-interview.

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

from frontend-interview.

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

from frontend-interview.

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

from frontend-interview.

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

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

from frontend-interview.