原生DOM探究 -- NodeList v.s. HTMLCollection
涉及获取元素的主要API
在获取原生DOM元素的时候,主要涉及这几个DOM API(链接为Living Standard):
Node
及对应集合NodeList
Element
(继承Node
)及对应集合HTMLCollection
Document
(继承Node
)
注:计划取代NodeList
和HTMLCollection
的Elements
目前并无广泛实现
基础知识 -- NodeList v.s. HTMLCollection
在不同版本的浏览器中,如果调用获取多元素的DOM方法(getElement...()),有的会得到NodeList
(多为旧浏览器),有的会得到HTMLCollection
(多为新浏览器)。使用Node Interface的方法,如childNodes,得到的通常是NodeList,而使用其他Interface的方法,又有可能得到HTMLCollection
。所以有必要了解一下这两者的区别。
关于这两个类型的差异,在Stackoverflow上有一个不错的问答。
其实,只要先看看Living Standard中这两个类型的IDL,便能猜出大概了。NodeList
的IDL如下:
interface NodeList {
getter Node? item(unsigned long index);
readonly attribute unsigned long length;
iterable<Node>;
};
而HTMLCollection
的IDL如下:
interface HTMLCollection {
readonly attribute unsigned long length;
getter Element? item(unsigned long index);
getter Element? namedItem(DOMString name);
};
相同点:
- 它们都有
length
属性 - 都有元素的getter,叫做
item
不同点:
NodeList
的元素是Node
,HTMLCollection
的元素是Element
。Element
继承自Node
,是Node
的一种,在HTML中,它一般是HTML元素(比如<p>
,<a>
之类的标签创建出来的对象)。而Node
作为父类,除了Element
还有一些其他子类,比如HTML元素内的文本对应的Text
,文档对应的Document
,注释对应的Comment
。HTMLCollection
里,只有Element
,而NodeList
里可以有Element
、Text
、Comment
等多种元素。按说如果获取元素返回的列表里只有Element
,那这两种类没多大区别,但事实上很多时候浏览器会将解析HTML文本时得到的Text
和Comment
一并放进列表里放回。比如说下面这一段代码<div>
<!-- Comment -->
<p>This is Some Text</p>
</div>若将这个div的子元素放在列表里返回,那么如果是作为
NodeList
返回,浏览器最多可以给这个列表5个元素(不同浏览器可能不同)- 一个
<div>
和注释间的断行和空格(或tab)作为text node(没错,标签之间的空白符号也可以被解析为text node) - 注释作为comment node
- 注释和
<p>
之间的断行和空格(或tab)作为text node p
作为element</p>
和</div>
之间的断行和空格(或tab)作为text node
因此
NodeList
里可能会有很多一般DOM操作不需要的text node和comment node需要处理。而HTMLCollection
则简单多了,只有<p>
这一个元素,这也是比较符合大多数人直觉的结果。- 一个
HTMLCollection
还有一个namedItem
方法,可以快速获取其中元素。假设有这样一段HTML:<div>
<!-- Comment -->
<p>This is Some Text</p>
<img name="test" src="test.jpg">
</div>那么假设得到了这个div的子元素构成的
HTMLCollection
,叫做list
,那么使用list.namedItem("test")
就可以直接得到里面的img
元素。查找顺序参考Living Standard,但是在现实中不是所有浏览器都遵循标准。比如标准规定如果有多个拥有相同id或者name的元素,只要返回第一个,但chrome和opera会将它们放在一个HTMLCollection或者NodeList里一并返回,参见MDN。
从IDL看不出来的还有如下几点
- 这两个类都是“live”的。对其中元素进行操作,会实时反映到DOM中(也因此如果一次性直接在这类列表上进行多个DOM操作的话,带来的开销会很大)。
item
和namedItem
都可以通过[]
的缩写进行调用,有的浏览器还支持用()
的缩写进行调用(也就是可以list[index]
,list[key]
或者list(index)
,list(key)
),以及直接用dot notation调用namedItem
(比如list.key
)。- 部分浏览器支持对
NodeList
调用namedItem
或间接通过[]
、()
、dot notation来调用namedItem
,但由于各浏览器支持不同,最好不对NodeList
做这种操作。 - IE8及以下版本浏览器中,注释属于
HTMLCommentElement
,算作Element
,因此会出现在HTMLCollection
里。
原生DOM探究 -- NodeList v.s. HTMLCollection的更多相关文章
- (85)Wangdao.com第十八天_JavaScript NodeList 接口,HTMLCollection 接口
NodeList 接口 HTMLCollection 接口 节点都是单个对象,有时需要一种数据结构,能够容纳多个节点 DOM 提供两种节点集合,用于容纳多个节点:NodeList 和 H ...
- 获取原生DOM,diy脚手架,vue-clide使用,element-ui的使用
一.获取原生DOM的方式 给标签或者属性添加ref属性 //1.添加属性 <div ref='shy'><div> <Home ref='home'></Ho ...
- 原生DOM操作vs框架虚拟DOM比较
1. 原生 DOM 操作 vs. 通过框架封装操作. 这是一个性能 vs. 可维护性的取舍.框架的意义在于为你掩盖底层的 DOM 操作,让你用更声明式的方式来描述你的目的,从而让你的代码更容易维护.没 ...
- jquer 使用原生DOM对象
js中使document.getElementById("ID"); Jquery中可以使用$("#id") 或者$("#id").get( ...
- jQuery 对象 与 原生 DOM 对象 相互转换
区别 jQuery 选择器得到的 jQuery对象 和 原生JS 中的document.getElementById() document.querySelector取得的 DOM对象 是两种不同类型 ...
- JQ对象和原生DOM对象
相同点:两者本质上都是DOM元素. 不同点:JQ对象是在原生DOM对象上进行了一次封装,使开发人员使用起来更简洁.高效. 两者之间用法也完全不同,很说初学者经常混淆. 其实区分两者并不难, 1.语法不 ...
- 【vue系列】Virtual DOM 真的比操作原生 DOM 快吗?
一.前言 网上都说操作真实dom怎么怎么慢,这儿有个例子:http://chrisharrington.github.io/demos/performance/,例子循环2000个随机数组,点击按钮重 ...
- [前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
- [react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
随机推荐
- [ACM_搜索] Triangles(POJ1471,简单搜索,注意细节)
Description It is always very nice to have little brothers or sisters. You can tease them, lock them ...
- jenkins2 hello pipeline
文章来自:http://www.ciandcd.com 文中的代码来自可以从github下载: https://github.com/ciandcd 根据前面的2篇文章,我们已经安装和配置好了je ...
- Git常用操作命令与图解
Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势. Git常用操作命令: 1) 远程仓库相关命令 检出仓库:$ git clone g ...
- Atitit .html5刮刮卡的gui实现总结
Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel ,这个十mask div.....posti ...
- 大姨吗向左,美柚向右,女性健康APP路在何方?
日前,中国IT研究中心发布了<2016Q3中国女性健康管理APP市场研究报告>,报告显示大姨吗与美柚占据了整个行业的绝对优势,大姨吗的行业用户覆盖率最高,美柚则在月活用户数方面领先. 不过 ...
- Mybatis多参传递的四种解决方案
Mybatis多参传递的四种解决方案 代码异常:org.apache.ibatis.binding.BindingException: Parameter 'param' not found. 长时间 ...
- GTD时间管理(3)---项目
一:什么是项目? 一个项目是由多步骤,多阶段组成的,不可能一步到位的. 项目分为可大可小. 魔兽世界这个程序是一个项目,是一个用10年开发的大型项目 搭建一个博客也可以成为一个项目,可以用一天时间去搭 ...
- mysql慢日志设置
mysql的慢日志查询对于sql的优化还是很有意义的,具体说下如何开启这个mysql慢查询日志(默认是开启的). 关于设置在mysql的官方手册或网上都有很多,但是要注意的是,mysql5.6与之前的 ...
- Crypto++入门学习笔记(DES、AES、RSA、SHA-256)(加解密)
转自http://www.cppblog.com/ArthasLee/archive/2010/12/01/135186.html 最近,基于某些原因和需要,笔者需要去了解一下Crypto++库,然后 ...
- Halcon标定步骤
Halcon标定步骤 1.设置相机内部参数的初始值 StartCamPar := [0.016,0,0.0000074,0.0000074,326,247,652,494]set_calib_data ...