原生dom操作复习篇

最新推荐文章于 2024-05-29 17:08:37 发布

原创最新推荐文章于 2024-05-29 17:08:37 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #dom

本文介绍了一种在HTML中通过JavaScript实现的功能：当点击ul元素下的li子元素时，可以获取并显示被点击li元素的下标。通过addEventListener监听click事件，并利用innerText属性和循环遍历li列表来实现这一功能。

太久没用，忘了具体如何使用。
故做此记录。

实现功能：点击li，alert对应下标

<ul id='#ul'>
	<li>One</li>
	<li>TWo</li>
	<li>Three</li>
</ul>

具体实现：

var ulEle = document.getElementById('ul')
ulEle.addEventListener('click',function(e){
  let src = e.target
  // 具体点击的li的text
  console.log(e.target.innerText)
  // 获取li列表
  var liList = document.getElementsByTagName('li')
  var liCount = liList.length
  for(let i=0; i<liCount; i++){
    liList[i].addEventListener('click',function(){
      console.log(i+1)
    },false)
  }
},false)