比较基础的一道面试题

题目如下：

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

为<ul>添加一个类bar

var ul = document.getElementById("list");
ul.className = ul.className + " bar";
ul.classList.add("bar");
ul.setAttribute("class", "foo bar");
//以上三种方法都可以

删除第10个<li>

var lis = document.getElementsByTagName("li");
var li10 = lis[9];
li10.parentNode.removeChild(li10);
//或者
var li10 = document.querySelector("li:nth-of-type(10)");
li10.parentNode.removeChild(li10);

在第 500 个 <li> 后面增加一个 <li> , 其文字内容为 <v2ex.com />

var tmp = document.createElement("li");
tmp.textContent = "<v2ex.com />";
var li501 = document.getElementsByTagName("li")[500];
li501.parentNode.insertBefore(tmp, li501);
//innerHTML 所有浏览器都支持
//textContent ie6/7/8不支持，火狐支持
//innerText 火狐不支持，ie6/7/8支持

点击任意 <li> 弹窗显示其为当前列表中的第几项

//这题如果从闭包的角度考虑，可能会给出以下答案：
var lis = document.querySelectorAll("li");
lis.forEach(function(li, i){
  li.onclick = (function(index){
    return function(){
       console.log(index);
    }
  }){i}
})
//当然，上面的答案是正确的，但是假如有数量惊人的li也是用这种方式的话，这个循环的消耗是不是有点多了？
//所以从性能角度考虑，可以采用以下方式
var lis = document.querySelectorAll("li");
var ul = document.getElementById("list");
ul.addEventListener("click", function(e){
  var activeTarget = e.target;
  var index = Array.prototype.indexOf.call(lis, activeTarget);
  console.log(index);
}, true);