js查找HTMLCollection對象中的下標

Cciradih 發布于2019-08-22 16:20 / 2976人閱讀

摘要：是什么它是對象的一個接口，這個接口包含了獲取到的元素集合，返回的類型是。它是及時更新的，當文檔中的變化是，它是會隨之變化的。屬性，返回集合當中子元素的數目。它有自帶的方法，參數為下標，返回具體的節點。需求列表中點擊子級，打印對應的下標。

前言

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

HTMLCollection是什么：

它是HTML DOM對象的一個接口，這個接口包含了獲取到的DOM元素集合，返回的類型是Object。

它很像數組，又不是數組，如果你想使用數組的一些方法操作這個集合，那么不好意思。

它是及時更新的，當文檔中的DOM變化是，它是會隨之變化的。

屬性：HTMLCollection.length，返回集合當中子元素的數目。

它有自帶的方法

    1.HTMLCollection.item(index)，參數為下標，返回具體的節點。
    2.HTMLCollection.namedItem(value),參數為字符串，返回具體的節點。

什么時候我們會獲取到HTMLCollection對象？
簡單，我們獲取dom元素就會獲取到的。

運行結果：

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

GPU云服務器云服務器 js 對象查找數據 js中的對象 js包裝對象中的屬性 js 獲取對象中的數據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94258.html

JS魔法堂：那些困擾你的DOM集合類型

摘要：五的子類對象會返回一個集合對象，集合內存儲類型的元素。七的子類初看很有可能以為集合元素就是單選表單元素，其實可以存儲任意類型的表單元素。八的子類開始，將返回子類的對象，其行為特征和一致。但在前，我們應該先了解清楚的類型的特征。一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　大家先看看下面的js，猜猜結果會怎樣吧！可選答案： ①. 獲取id屬性值為id的節點元素 ②...

468122151 2019-08-21 10:36 評論0 收藏0
遍歷DOM元素的children屬性遇到的坑

摘要：小結這下我們可以得出結論了個屬性返回的對象不止能遍歷到子元素，還能遍歷到來自其原型的三個屬性。既要防止那些添加修改了原型屬性的對象遍歷出多余的的結果，也要防止類似這種非標準屬性返回一個屬性的枚舉性不可控的對象的坑。問題的引出關于DOM元素的children屬性，以前我只在意它和childNodes屬性的區別：即children屬性只會返回子元素節點集合，而childNodes返回的...

weknow619 2019-08-21 13:30 評論0 收藏0
從DOM選擇器的返回值說起

摘要：原文發布在我的獨立博客上從選擇器的返回值說起拋開大大解放生產力的，使用獲取元素要使用方法，或類似的，第一種情況下，根據獲取時，返回值是唯一的元素而根據等獲取時候，返回值是包含所有符合條件的多個元素的列表。原文發布在我的獨立博客上 ~：從DOM選擇器的返回值說起拋開大大解放生產力的jQuery，使用JS獲取元素要使用getElementById方法，或類似的getElem...

lmxdawn 2019-08-21 10:31 評論0 收藏0
JS總結篇--[總結]JS操作DOM常用API詳解

摘要：文本整理了操作的一些常用的，根據其作用整理成為創建，修改，查詢等多種類型的，主要用于復習基礎知識，加深對原生的認識。方法主要是用于添加大量節點到文檔中時會使用到。文本整理了javascript操作DOM的一些常用的api，根據其作用整理成為創建，修改，查詢等多種類型的api，主要用于復習基礎知識，加深對原生js的認識。基本概念在講解操作DOM的api之前，首先我們來復習一下一些基...

malakashi 2019-08-20 16:52 評論0 收藏0
JS基礎入門篇（三）—使用JS獲取頁面中某個元素的4種方法以及之間的差別（一）

摘要：方式二使用通過名獲取元素錯誤代碼結果錯誤原因頁面上的取名不是唯一的，是可以重復的。就算頁面上面只有一個，它的返回值依舊是集合。需求二獲取頁面中為的的第一層子級。返回值也是一個類似數組的集合。 1.使用JS獲取頁面中某個元素的4種方法 1.通過id名獲取元素 document.getElementById(id名); 2.通過class名獲取元素 document.getElements...

Jackwoo 2019-08-22 17:09 評論0 收藏0