和 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. zookeeper系列（九）zookeeper的会话详解

    作者:leesf    掌控之中,才会成功:掌控之外,注定失败. 出处:http://www.cnblogs.com/leesf456/p/6103870.html尊重原创,大家共同学习: 一.前言 ...

  2. python 二叉搜索树相关代码

    class TreeNode: def __init__(self, val): self.val = val self.left = None self.right = None class Ope ...

  3. 获取当前页面的webview ID

    代码: A页面 <script type="text/javascript"> var ws = null; mui.plusReady(function(){ ws ...

  4. GDB之常见错误

    1. dl-debug.c:74: No such file or directory. 如上图,当使用 gdb 调试执行 r 时,会出现如上打印. 解决方法如下: apt-get install e ...

  5. leetcode-hard-array-179 Largest Number-NO

    mycode  写的很复杂,还报错... 参考: class Solution: # @param {integer[]} nums # @return {string} def largestNum ...

  6. go module 使用举例

    go语言中,从1.11开始,引入module,进行版本管理. 通过使用module,工程目录的位置不用必须放在GOPATH下. 本文介绍 module的使用. 下文中用的Go版本是1.13. 1. g ...

  7. webstrom配置node语法提示

    一.mac下打开设置 二.输入node,找到node.js npm,勾选上对勾就好了. 第三.按住ctr,点击右键可以点进去就可以了.

  8. List自定义对象的排序，根据对象的某一列进行排序

    在工作中,经常需要对List对象集合进行排序操作,下面总结下搞个通用排序对象,原理是使用JAVA的 Comparator    接口实现排序   不多说直接上“干货” 1.存在实体类: @Data @ ...

  9. 前端需要掌握的Babel知识

    Babel 是怎么工作的 Babel 是一个 JavaScript 编译器. 做与不做 注意很重要的一点就是,Babel 只是转译新标准引入的语法,比如: 箭头函数 let / const 解构 哪些 ...

  10. Qt编写自定义控件15-百分比仪表盘

    前言 百分比仪表盘,主要的应用场景是展示销售完成率.产品合格率等,也可以作为一个进度百分比展示,可以独立设置对应的标题文字,标题文字的颜色和整体的颜色都可以单独设置,建议设置成统一的风格,这样会显得更 ...