一道简单而又不简单的阿里面试题

题目：

2、使用原生js，ul li中的最后一个p标签。 (1) 删除最后一个p标签
(2) 点击任意li标签，打印所在序号。（用直接绑定 和 事件委托） 2种方式

答案：

<ul id="oBox">
    <li>
        <p>1</p>
        <p>2</p>
    </li>
    <li>
        <p>1</p>
        <p>2</p>
    </li>
    <li>
        <p>1</p>
        <p>2</p>
    </li>
</ul>

<script>



let oUl = document.getElementById('oBox');
let oLi = oUl.getElementsByTagName('li');
// 移除最后一个p节点
for(let i = 0; i < oLi.length; i ++) {
  var lastChild = oLi[i].lastElementChild ? oLi[i].lastElementChild : oLi[i].lastChild;
  oLi[i].removeChild(lastChild)
}


// 直接绑定
for(let i = 0;i < oLi.length; i ++) {
  oLi[i].onclick = function() {
      alert(i)
  }
}


// 事件委托
oUl.addEventListener("click",clickHandler);
function clickHandler(e) {
    if(e.target.nodeName.toLowerCase() !== 'li') return;  // 或者写 if(e.target.constructor!==HTMLLIElement) return;
    let arr = Array.from(oUl.children)
    let index = arr.indexOf(e.target);
    alert(index)
}


</script>