js查詢HTMLCollection物件中的下標

miomiomio發表於2018-04-15
JSHTML物件

前言

這兩天寫的一個小功能，需要獲取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~~~ 一次迴圈就搞定，這是我目前想到的最合理的方法，對

相關文章