查找HTMLCollection对象中的下标

原创 2018年04月15日 13:46:52

前言

这两天写的一个小功能,需要获取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~~~ 一次循环就搞定,这是我目前想到的最合理的方法,对

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_38426472/article/details/79948754

数据结构基础系列(8):查找

-
  • 1970年01月01日 08:00

DOM HTMLCollection对象

原文链接:http://www.w3school.com.cn/xmldom/dom_htmlcollection.asp 做题时注意到通过document.getElement...
  • tt_twilight
  • tt_twilight
  • 2017-11-04 10:58:07
  • 520

类数组转化为数组 arguments,nodelist,htmlcollection,namenodemap

根据自己学习的来写,如果有什么不对或不足的请多多指教!我之前看书了解到的类数组有arguments,NodeList,HTMLCollection还有NamedNodeMap类数组1.定义:Javas...
  • a18792627168
  • a18792627168
  • 2018-03-02 22:55:47
  • 27

获取了一个数组对象,可以判断它所在的下标

有时候我们知道数组的对象,想获取其所对应的下标,目前有提供两种方法 一、ArrayUtils工具类 ArrayUtil工具类下的indexOf方法 例: int [] aa = {1...
  • linxijun120903
  • linxijun120903
  • 2017-03-08 13:13:45
  • 1035

关于HTMLCollection和NodeList

在javascript中对DOM的操作是很频繁的是事情。 事实上,在用原生javascript选择器获取dom元素的时候。能直接返回 元素的也仅仅只有以下两条var dom1=document.g...
  • zqc200789789
  • zqc200789789
  • 2015-12-12 17:48:41
  • 275

查找某字母在字符串中出现的次数及对应的下标

  • 2009年03月30日 22:41
  • 2KB
  • 下载

写代码可以在整型有序数组中查找想要的数字,找到了返回下标,找不到返回 - 1.(折半查找)

#define _CRT_SECURE_NO_WARNINGS 1 #include #include int Find(int X, int Y, int key,int *p) {...
  • w17602946223
  • w17602946223
  • 2017-10-15 19:08:12
  • 336

二分法在一个vector容器里面找某一个值,并求出该元素的下标

float COSGWellLog::GetPropertybyMD(float depth) { std::vector vProperty = GetProperty(); std::vec...
  • hudfang
  • hudfang
  • 2014-11-17 09:29:48
  • 1396

在一个字符串中查找第一个子串,并输出第一个子串的下标

  • 2017年06月23日 11:17
  • 726B
  • 下载

求一个数组最小的两个数的下标

  • 2013年05月18日 18:24
  • 844KB
  • 下载
收藏助手
不良信息举报
您举报文章:查找HTMLCollection对象中的下标
举报原因:
原因补充:

(最多只允许输入30个字)