js查找HTMLCollection对象中的下标

前言

这两天写的一个小功能，须要获取HTMLCollection指定对象的索引，深刻研究以后才发现本身知识域的盲区，在这里也写出来记录一下，但愿和我存在一样困惑的朋友能够一同探讨一下。

1. HTMLCollection是什么：

   • 它是HTML DOM对象的一个接口，这个接口包含了获取到的DOM元素集合，返回的类型是Object。
   • 它很像数组，又不是数组，若是你想使用数组的一些方法操做这个集合，那么很差意思。
   • 它是及时更新的，当文档中的DOM变化是，它是会随之变化的。
   • 属性：HTMLCollection.length，返回集合当中子元素的数目。

   • 它有自带的方法

     1.HTMLCollection.item(index)，参数为下标，返回具体的节点。
         2.HTMLCollection.namedItem(value),参数为字符串，返回具体的节点。

2. 何时咱们会获取到HTMLCollection对象？
   简单，咱们获取dom元素就会获取到的。

   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
   </ul>
   <script type="text/javascript">
       var lis= document.getElementsByTagName("li");
       console.log(lis);
       console.log(typeof lis);
   </script>

   运行结果：
   

3.怎么获取HTMLCollection对象的下标？

经过HTMLCollection.item(index)和HTMLCollection.namedItem(value)获取到的都是DOM节点，那怎么获取到指定节点的下标呢，这个官方是没有提供相应的方法的，下面咱们经过一个例子实现一下。

需求：ul列表中点击子级li，打印li对应的下标。

说下个人初始想法，既然HTMLCollection是个对象，那么indexof这种操做显然很瞎，既然不能使用数组的方法控制它，那我就把它编程数组，而后就用for循环balabala....写了一大堆，将它转为数组，再写点击事件查找下标，效果实现是实现了，可特么太费劲了，看看这代码量

var lis= document.getElementsByTagName("li");
    var ul = document.getElementsByTagName("ul")[0];
    //=======================看下面==========================
    var newArr = [];
    for(var i in lis){
        newArr.push(lis[i])
    }
    //=======================看下面==========================
    //事件委托绑定事件
    ul.onclick = function(e){
        var even = e||event;
        var target = even.target;
        if(target.nodeName.toLowerCase() == "li"){
            //=======================看下面==========================
            var index = newArr.indexOf(target)
            return index;
            //=======================看下面==========================
        }
    }

emmmm......两次循环，效果实现
如今换种方法，直接操做HTMLCollection对象

var arr= document.getElementsByTagName("li");
    var ul = document.getElementsByTagName("ul")[0];
    ul.onclick = function(e){
        var even = e||event;
        var target = even.target;
        if(target.nodeName.toLowerCase() == "li"){
            //=======================看下面==========================
            for(var k in arr){
                if(arr[k] == target)return k;
            }
            //=======================看上面==========================
        }
    }

good~~~ 一次循环就搞定，这是我目前想到的最合理的方法，对