js查找HTMLCollection對象中的下標

2019年8月24日 87次阅读 来源: miomiomio

媒介

這两天寫的一個小功用，須要獵取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>

    運轉結果：
    《js查找HTMLCollection對象中的下標》

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~~~ 一次輪迴就搞定，這是我現在想到的最合理的要領，對

    原文作者：miomiomio
    原文地址: https://segmentfault.com/a/1190000014391084
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞