亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

js查找HTMLCollection對(duì)象中的下標(biāo)

Cciradih / 3067人閱讀

摘要：是什么它是對(duì)象的一個(gè)接口，這個(gè)接口包含了獲取到的元素集合，返回的類(lèi)型是。它是及時(shí)更新的，當(dāng)文檔中的變化是，它是會(huì)隨之變化的。屬性，返回集合當(dāng)中子元素的數(shù)目。它有自帶的方法，參數(shù)為下標(biāo)，返回具體的節(jié)點(diǎn)。需求列表中點(diǎn)擊子級(jí)，打印對(duì)應(yīng)的下標(biāo)。

前言

這兩天寫(xiě)的一個(gè)小功能，需要獲取HTMLCollection指定對(duì)象的索引，深入研究之后才發(fā)現(xiàn)自己知識(shí)域的盲區(qū)，在這里也寫(xiě)出來(lái)記錄一下，希望和我存在同樣困惑的朋友可以一同探討一下。

HTMLCollection是什么：

它是HTML DOM對(duì)象的一個(gè)接口，這個(gè)接口包含了獲取到的DOM元素集合，返回的類(lèi)型是Object。

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

它是及時(shí)更新的，當(dāng)文檔中的DOM變化是，它是會(huì)隨之變化的。

屬性：HTMLCollection.length，返回集合當(dāng)中子元素的數(shù)目。

它有自帶的方法

    1.HTMLCollection.item(index)，參數(shù)為下標(biāo)，返回具體的節(jié)點(diǎn)。
    2.HTMLCollection.namedItem(value),參數(shù)為字符串，返回具體的節(jié)點(diǎn)。

什么時(shí)候我們會(huì)獲取到HTMLCollection對(duì)象？
簡(jiǎn)單，我們獲取dom元素就會(huì)獲取到的。

    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    • 
    
  • 6
    • 
    
  • 7
    •

運(yùn)行結(jié)果：

3.怎么獲取HTMLCollection對(duì)象的下標(biāo)？

通過(guò)HTMLCollection.item(index)和HTMLCollection.namedItem(value)獲取到的都是DOM節(jié)點(diǎn)，那怎么獲取到指定節(jié)點(diǎn)的下標(biāo)呢，這個(gè)官方是沒(méi)有提供相應(yīng)的方法的，下面我們通過(guò)一個(gè)例子實(shí)現(xiàn)一下。

需求：ul列表中點(diǎn)擊子級(jí)li，打印li對(duì)應(yīng)的下標(biāo)。

說(shuō)下我的初始想法，既然HTMLCollection是個(gè)對(duì)象，那么indexof這種操作顯然很瞎，既然不能使用數(shù)組的方法控制它，那我就把它編程數(shù)組，然后就用for循環(huán)balabala....寫(xiě)了一大堆，將它轉(zhuǎn)為數(shù)組，再寫(xiě)點(diǎn)擊事件查找下標(biāo)，效果實(shí)現(xiàn)是實(shí)現(xiàn)了，可特么太費(fèi)勁了，看看這代碼量
    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......兩次循環(huán)，效果實(shí)現(xiàn)
現(xiàn)在換種方法，直接操作HTMLCollection對(duì)象

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/94258.html

相關(guān)文章

  • JS魔法堂：那些困擾你的DOM集合類(lèi)型

    摘要：五的子類(lèi)對(duì)象會(huì)返回一個(gè)集合對(duì)象，集合內(nèi)存儲(chǔ)類(lèi)型的元素。七的子類(lèi)初看很有可能以為集合元素就是單選表單元素，其實(shí)可以存儲(chǔ)任意類(lèi)型的表單元素。八的子類(lèi)開(kāi)始，將返回子類(lèi)的對(duì)象，其行為特征和一致。但在前，我們應(yīng)該先了解清楚的類(lèi)型的特征。 一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　 大家先看看下面的js，猜猜結(jié)果會(huì)怎樣吧！ 可選答案： ①. 獲取id屬性值為id的節(jié)點(diǎn)元素 ②...

    468122151 評(píng)論0 收藏0

  • 遍歷DOM元素的children屬性遇到的坑

    摘要：小結(jié)這下我們可以得出結(jié)論了個(gè)屬性返回的對(duì)象不止能遍歷到子元素，還能遍歷到來(lái)自其原型的三個(gè)屬性。既要防止那些添加修改了原型屬性的對(duì)象遍歷出多余的的結(jié)果，也要防止類(lèi)似這種非標(biāo)準(zhǔn)屬性返回一個(gè)屬性的枚舉性不可控的對(duì)象的坑。 問(wèn)題的引出 關(guān)于DOM元素的children屬性，以前我只在意它和childNodes屬性的區(qū)別：即children屬性只會(huì)返回子元素節(jié)點(diǎn)集合，而childNodes返回的...

    weknow619 評(píng)論0 收藏0

  • 從DOM選擇器的返回值說(shuō)起

    摘要：原文發(fā)布在我的獨(dú)立博客上從選擇器的返回值說(shuō)起拋開(kāi)大大解放生產(chǎn)力的，使用獲取元素要使用方法，或類(lèi)似的，第一種情況下，根據(jù)獲取時(shí)，返回值是唯一的元素而根據(jù)等獲取時(shí)候，返回值是包含所有符合條件的多個(gè)元素的列表。 原文發(fā)布在我的獨(dú)立博客上 ~： 從DOM選擇器的返回值說(shuō)起 拋開(kāi)大大解放生產(chǎn)力的jQuery，使用JS獲取元素要使用getElementById方法，或類(lèi)似的getElem...

    lmxdawn 評(píng)論0 收藏0

  • JS總結(jié)篇--[總結(jié)]JS操作DOM常用API詳解

    摘要：文本整理了操作的一些常用的，根據(jù)其作用整理成為創(chuàng)建，修改，查詢(xún)等多種類(lèi)型的，主要用于復(fù)習(xí)基礎(chǔ)知識(shí)，加深對(duì)原生的認(rèn)識(shí)。方法主要是用于添加大量節(jié)點(diǎn)到文檔中時(shí)會(huì)使用到。 文本整理了javascript操作DOM的一些常用的api，根據(jù)其作用整理成為創(chuàng)建，修改，查詢(xún)等多種類(lèi)型的api，主要用于復(fù)習(xí)基礎(chǔ)知識(shí)，加深對(duì)原生js的認(rèn)識(shí)。 基本概念 在講解操作DOM的api之前，首先我們來(lái)復(fù)習(xí)一下一些基...

    malakashi 評(píng)論0 收藏0

  • JS基礎(chǔ)入門(mén)篇（ 三 ）—使用JS獲取頁(yè)面中某個(gè)元素的4種方法以及之間的差別（ 一 ）

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

    Jackwoo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<