前言

這兩天寫的一個小功能，需要獲取HTMLCollection指定物件的索引，深入研究之後才發現自己知識域的盲區，在這裡也寫出來記錄一下，希望和我存在同樣困惑的朋友可以一同探討一下。

HTMLCollection是什麼：

• 它是HTML DOM物件的一個介面，這個介面包含了獲取到的DOM元素集合，返回的型別是Object。
• 它很像陣列，又不是陣列，如果你想使用陣列的一些方法操作這個集合，那麼不好意思。
• 它是及時更新的，當文件中的DOM變化是，它是會隨之變化的。
• 屬性：HTMLCollection.length，返回集合當中子元素的數目。
• 它有自帶的方法
  1.HTMLCollection.item(index)，引數為下標，返回具體的節點。
  2.HTMLCollection.namedItem(value),引數為字串，返回具體的節點。

什麼時候我們會獲取到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>

執行結果：

怎麼獲取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~~~ 一次迴圈就搞定，這是我目前想到的最合理的方法，對