javascript - 查询getElementsByTagName中元素的数组索引号

问题描述

问 题

在编写动作事件的时候，想将js部分和html部分完全分割出去，
首先是html中的元素：

<div id="show">
        <div id="title">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
    </div>

也就是两个div；
按照我所知道的方法是：

window.onload=showChange;
function showChange(){
    var GO=document.getElementById("title");
    for (var i = 0; i < GO.getElementsByTagName("div").length; i++) {
        GO.getElementsByTagName("div")[i].onmouseover=function(){
                    #code
        }
    }
}

然后问题来了，我希望通过window.event.srcElement---当鼠标划过的时候输出对应的i值，或者是说，希望能够或的通过getElementsByTagName查找时，各个子div在数组中的索引号.
如果有其他的方法，只要是满足js和html分离的也麻烦提供一下。
搞了很久都搞不出来，麻烦大家帮个忙。

解决方案

你的意思是划过 a，b，c的时候能得到他们对应的索引值0,1,2？

var nodelist=document.getElementById("title").getElementsByTagName("div");
for(var i=0;i<nodelist.length;i++){
    (function(x){
        nodelist[x].addEventListener("mousemove",function(){
         console.log(x)
        })
    })(i)
}

或者用let定义变量

for(let i=0;i<nodelist.length;i++){
   nodelist[i].addEventListener("mousemove",function(){
         console.log(i)
   })
}

这篇关于javascript - 查询getElementsByTagName中元素的数组索引号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！