js查找HTMLCollection对象中的下标

Cciradih 发布于2019-08-22 16:20 / 2975人阅读

摘要：是什么它是对象的一个接口，这个接口包含了获取到的元素集合，返回的类型是。它是及时更新的，当文档中的变化是，它是会随之变化的。属性，返回集合当中子元素的数目。它有自带的方法，参数为下标，返回具体的节点。需求列表中点击子级，打印对应的下标。

前言

这两天写的一个小功能，需要获取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 获取对象中的数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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