和 NodeList 类似, HTMLCollection 也是一个 类数组对象, 和NodeList不同的是, 它是各种 元素节点 的集合, 且不具有 forEach() 方法, 因此如果不转为真正的数组, 则只能用 for 去遍历.

会返回 HTMLCollection 对象的属性方法包括: document.links / document.forms / document.images / document.getElementsByXXX() / 等, 在实际开发中, 碰到HTMLCollection 的概率会比 NodeList 要更多.

document.getElementsByTagName('div') instanceof HTMLCollection
// true document.querySelectorAll('div') instanceof NodeList
// true

以上两个方法获取页面上所有 div 元素节点, 不过前者(document.getElementsByTagName)要更快, 因为它只在元素节点里面找, 而后者是在7种节点类型里面找.

怎样理解HTMLCollection接口的更多相关文章

  1. 我对面向对象设计的理解——Java接口和Java抽象类

    在没有好好地研习面向对象设计的设计模式之前,我对Java接口和Java抽象类的认识还是很模糊,很不可理解. 刚学Java语言时,就很难理解为什么要有接口这个概念,虽说是可以实现所谓的多继承,可一个只有 ...

  2. Golang 入门系列(四)如何理解interface接口

    前面讲了很多Go 语言的基础知识,包括go环境的安装,go语言的语法等,感兴趣的朋友,可以先看看之前的文章.https://www.cnblogs.com/zhangweizhong/category ...

  3. (85)Wangdao.com第十八天_JavaScript NodeList 接口,HTMLCollection 接口

    NodeList 接口        HTMLCollection 接口 节点都是单个对象,有时需要一种数据结构,能够容纳多个节点 DOM 提供两种节点集合,用于容纳多个节点:NodeList 和 H ...

  4. vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除

    一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...

  5. 理解Hybrid接口的应用

    Hybrid接口既可以连接普通终端的接入链路又可以连接交换机间的干道链路,特允许多个vlan的帧通过,并可以在出接口方向将某些vlan帧的标签剥掉. 通过配置Hybrid接口,能过实现对VLAN标签的 ...

  6. (VLAN)理解Hybrid接口的应用

    实验三:理解Hybrid接口的应用 实验原理: 实验内容: 某企业二层网络使用两台S3700交换机S1和S2,且两台设备在不同的楼层.网络管理员规划了3个不同VLAN, HR部门使用VLAN 10,市 ...

  7. 理解Java接口

    作者:梅云罗链接:https://www.zhihu.com/question/20111251/answer/14760353来源:知乎著作权归作者所有,转载请联系作者获得授权. 接口只是一个规范, ...

  8. C# 我理解的接口、抽象类、以及事件

    一.摘要 面试中无数次被问及到什么是接口,什么是抽象类,接口和抽象类有什么区别?什么是委托,什么是事件. 请写出猫叫了,老鼠跑了的例子..... 这些东西对于一些初学者来说可能还真的有点搞不懂,对于一 ...

  9. [原创]java WEB学习笔记27:深入理解面向接口编程

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

随机推荐

  1. window 定时任务小项目,每秒钟,每分钟访问url

    个人百度网盘中 链接: https://pan.baidu.com/s/15sK2H-OtrAkAYcXjsxwihA 提取码: awv3 复制这段内容后打开百度网盘手机App,操作更方便哦

  2. CodeIgniter启用缓存和清除缓存的方法

    Codeigniter支持缓存技术,以达到最快的速度.尽管CI已经相当高效了,但是网页中的动态内容.主机的内存CPU和数据库读取速度等因素直接影响了网页的加载速度.依靠网页缓存,你的网页可以达到近乎静 ...

  3. react-hook的简单的动画插件react-simple-animate(其实是react插件,但是这里只介绍react-hook的简单用法)

    1.useAnimate(普通anima动画的形式) (1)js const animate = useAnimate({ complete: { display: 'none' }, //动画完成的 ...

  4. leetcode218 天际线问题

    来自leetcode题解:扫描线法AlgsCG class Solution { public: vector<vector<int>> getSkyline(vector&l ...

  5. zabbix*邮件报警 *用户参数User parameters *定义key值 *Agentd主动模式与被动模式

    邮件报警 #下载安装邮件报警系统wget http://caspian.dotconf.net/menu/Software/SendEmail/sendEmail-v1.56.tar.gz yum - ...

  6. 发布机制-灰度发布-例子:Windows

    ylbtech-发布机制-灰度发布-例子:Windows 在传统软件产品发布过程中(例如微软的Windows 7的发布过程中),一般都会经历Pre-Alpha.Alpha.Beta.Release c ...

  7. monkey 查找闪退页面的方法

    使用了命令 adb shell monkey  --pct-touch 100 -v -p  com.iBer.iBerAppV2  5000 >/Users/kaibinliu/Desktop ...

  8. k8s-高可用多主master配置

    准备主机 centos7镜像 node1: 192.168.0.101 node2: 192.168.0.102 node3: 192.168.0.103 vip: 192.168.0.104 配置s ...

  9. SCI EI 检索的会议期刊

    SCI EI 收录 SCI EI 收录 SCI Impact Factor Search: http://www.heavyoil.cn/if.aspx SCI indexed journal lis ...

  10. python 之魔法方法

    描述符就是将某种特殊类型的类的实例指派给另一个类的属性 例如下面的示例 class MyDecriptor(): def get(self,instance,owner): print("g ...