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~~~ 一次循環就搞定，這是我目前想到的最合理的方法，對