DOM操作类题目

DOM操作类题目

Q1

有以下页面内容，请实现点击任一LI标签时在控制台输出或alert其index （仅限原生API，不考虑兼容性问题），并使性能最优

<ul id="list">
  <li>点击我弹出0</li>
  <li>点击我弹出1</li>
  <li>点击我弹出2</li>
  ...(此处省略N个相同的LI)
</ul>

解析

1. 暴力方法：给每个li元素注册点击事件，打印遍历的索引
   1. 使用for循环声明索引时需注意它的使用方式 var or let
2. 优化性能：使用事件委托方式，只给ul注册点击事件，判断点击li元素时，打印索引
   1. 事件委托参考 事件阶段和委托代理
   2. document APIs获取 dom 元素对象，存储的是 DOM 的指向，所以可以直接匹配DOM对象是否相同，或用indexOf 获取索引。

代码如下：

// 遍历注册事件 - var
var lis = document.querySelectorAll('#list li')

for (var i = 0; i < lis.length; i++) {
  // var 声明的变量没有块作用域，所以不能直接打印
  (function(i) {
    lis[i].addEventListener('click', () => {
      console.log(i)
    })
  })(i)
}

// 遍历注册事件 - let
const lis = document.querySelectorAll('#list li')

for (let i = 0; i < lis.length; i++) {
  // let 声明的变量有块作用域，可以直接打印
  lis[i].addEventListener('click', () => {
    console.log(i)
  })
}

// 事件委托
const list = document.querySelector('#list')

list.addEventListener('click', (e) => {
  let index = Array.from(list.children).indexOf(e.target)
  console.log(index)
})