和 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. java实现二维码的生成与解析

    简单介绍下二维码:二维码其实就是一种编码技术,只是这种编码技术是用在图片上了,将给定的一些文字,数字转换为一张经过特定编码的图片,而解析二维码则相反,就是将一张经过编码的图片解析为数字或者文字. 当然 ...

  2. Java 多线程：什么是线程安全性

    线程安全性 什么是线程安全性 <Java Concurrency In Practice>一书的作者 Brian Goetz 是这样描述"线程安全"的:"当多 ...

  3. css实现元素在div底部显示

    #CSS .1 {position:relative;} .2 {;} #HTML <div class="1"> <div class="2" ...

  4. 状压dp之不相连块

    传送门 一块田里草地格子不能相邻,问有几种方案. 预处理不相邻块 #include<iostream> #include<cstdio> #include<algorit ...

  5. linux 下安装redis并用QT写客户端程序进行连接

      1.安装redis.使用如下命令: wget http://dowload.redis.io/redis-stable.tar.gz tar xzf redis-stable.tar.gz cd ...

  6. P5020 货币系统

    P5020 货币系统 题解 仔细分析... 这道题其实就是求所给数组中有多少个数字不能被该数组中的数字自由组合表示出来 比如样例1 3,10 不能被该集合里的数字表示出来,所以他们组成目标集合 6=3 ...

  7. ios wkwebview allowFileAccessFromFileURLs

    最近在做 cordova 打包 ios 的项目(webpack 打包 vue项目后,再用 cordova 打包).在加载 file:/// 协议时因为 webview安全机制有一些报错.SK各种找解决 ...

  8. Android RecyclerView实现加载多种条目类型

    今天咱们是用RecyclerView来实现这个多种Item的加载. 其实最关键的是要复写RecyclerView的Adapter中的getItemViewType()方法 这个方法就根据条件返回条目的 ...

  9. WPF学习笔记 - 如何用WPF创建单实例应用程序

    使用一个已命名的(操作系统范围的)互斥量. bool mutexIsNew; using(System.Threading.Mutex m = new System.Threading.Mulex(t ...

  10. WebSocket 搭建简单聊天网站

    HTML5 WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏 ...