HTML5 HTMLCollection和NodeList的区别详解


Posted in HTML / CSS onApril 29, 2020

本文主要介绍了HTML5 HTMLCollection和NodeList的区别详解,分享给大家,具体如下:

获取

HTMLCollection 对象

getElementsByTagName() 方法返HTMLCollection对象。
HTMLCollection 对象类似包含 HTML 元素的一个数组。

注意:

  • HTMLCollection 不是一个数组!
  • HTMLCollection 看起来可能是一个数组,但其实不是。
  • 你可以像数组一样,使用索引来获取元素。
  • HTMLCollection 无法使用数组的方法: valueOf(), pop(), push(), 或 join()。

NodeList 对象

大部分浏览器的querySelectorAll()返回 NodeList 对象。

注意

  • 节点列表不是一个数组!
  • 节点列表看起来可能是一个数组,但其实不是。
  • 你可以像数组一样,使用索引来获取元素。
  • 节点列表无法使用数组的方法: valueOf(), pop(), push(), 或 join() 。

HTMLCollection 与 NodeList 的区别

  1. HTMLCollection是 HTML 元素的集合。(仅包含元素)
  2. NodeList 是一个文档节点的集合。
  3. NodeList 与 HTMLCollection 有很多类似的地方。
  4. NodeList 与 HTMLCollection 都与数组对象有点类似,可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
  5. NodeList 与 HTMLCollection 都有 length 属性。
  6. HTMLCollection 元素可以通过 name,id 或索引来获取。
  7. NodeList 只能通过索引来获取。
  8. 只有 NodeList 对象有包含属性节点和文本节点。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <P>1</P>
    <P id="p2">2</P>
    <P>3</P>
    <P>4</P>
    <P>5</P>
    <script>
            //  getElementsByTagName() 方法返回 HTMLCollection 对象。 
            const myCollection = document.getElementsByTagName('p');
            console.log(myCollection)
            // 大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
            const myNodeList  = document.querySelectorAll("p");
            console.log(myNodeList)
            console.log(myNodeList ===myCollection) //false
            console.log(myCollection.p2)  // <P id="p2">2</P>
            console.log(myNodeList.p2) //undefine 

    </script>
</body>
</html>

到此这篇关于HTML5 HTMLCollection和NodeList的区别详解的文章就介绍到这了,更多相关HTML5 HTMLCollection NodeList内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 #HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 #HTML / CSS
HTML5中的网络存储实现方式
Apr 28 #HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 #HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 #HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 #HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 #HTML / CSS
You might like
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
js键盘事件的keyCode
2014/07/29 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
js实现旋转木马效果
2017/03/17 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Opencv求取连通区域重心实例
2020/06/04 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
Unix如何在一行中运行多个命令
2015/05/29 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
12岁生日演讲稿
2014/05/14 职场文书
男性健康日的活动方案
2014/08/18 职场文书
死亡赔偿协议书
2015/01/28 职场文书
房屋认购协议书
2015/01/29 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书