js如何获取被点击li是第几个？

JavaScript018

js如何获取被点击li是第几个？,第1张

1、首先打开html编辑器，新建一个html文件，里面写入4个li标签，并在上方的style标签中设置li的样式，给li标签高度和宽度以及边框，同时设置li标签之间的间隔。

2、然后在script标签中写入js，首先用getElementsByTagName获取所有li标签的dom元素，任何使用for循环遍历数组中的元素，for循环内部设置每个li标签的index元素，在给每个元素添加点击事件，点击之后就会弹出li标签的index值出来。

3、最后打开浏览器，点击其中的一个标签，就会弹出对应的li标签数值了。

思路：为li对象添加单击事件→事件触发后利用innerHTML获取li的文本。实例演示如下：

1、HTML结构

<ul id="test">

<li>Glen</li>

<li>Tane</li>

<li>John</li>

<li>Ralph</li>

</ul>

2、javascript代码

window.onload = function(){

var obj_lis = document.getElementById("test").getElementsByTagName("li")

for(i=0i<obj_lis.lengthi++){

obj_lis[i].onclick = function(){

alert(this.innerHTML)

}

}

}

3、效果演示