NodeList、HTMLCollection和NamedNodeMap
上篇文章以arguments为例讲到了类数组对象,这篇我们讨论更多的类数组对象NodeList、HTMLCollection和NamedNodeMap。既然是类数组对象,这3种对象也都能应用上篇文章中提到的类数组对象的可用方法,下面主要讲讲这3种对象的应用及区别。
HTMLCollection
可以从字面上理解,也就是HTML元素的集合,是一个类数组对象。一般包括getElementsByTagName()、getElementsByClassName()、getElementsByName()等方法的返回值,以及children、document.links、document.forms等元素集合。
<div></div>
<div></div>
<script>
var divs = document.getElementsByTagName("div");
console.log(Array.prototype.toString.call(divs));//"[object HTMLCollection]"
console.log(divs.length);//2
</script>
HTMLCollection是动态的,也就是说对其的增删改都会更新到这个类数组对象中。
<div></div>
<div></div>
<script>
var divs = document.getElementsByTagName("div");
var newDiv = document.createElement("div");
divs[0].parentNode.appendChild(newDiv);//添加一个新div
console.log(divs);//[div,div,div]
</script>
NodeList
同样可以从字面上理解,节点集合,是一个类数组对象,通常由childNodes和querySelectorAll()返回。与HTMLCollection不同的是,NodeList是Node集合,包括但不仅限于HTMLCollection中的元素节点,还可以是其他节点。Node节点共有12种,这里不详细介绍。
<div>
<p></p>
</div>
<script>
var divs = document.getElementsByTagName("div");
//childNode返回值
console.log(Array.prototype.toString.call(divs[0].childNodes));//"[object NodeList]"
console.log(divs[0].childNodes);//[text,p,text]
//querySelectorAll返回值
console.log(Array.prototype.toString.call(document.querySelectorAll("p")));//"[object NodeList]"
console.log(document.querySelectorAll("p"));//[p]
</script>
要注意一点,NodeList不像HTMLCollection都是动态的,通过querySelectorAll()返回的NodeList是静态的,相当于获取时刻的一个快照。
<div>
<p></p>
</div>
<script>
var divs = document.getElementsByTagName("div");
var listChild = divs[0].childNodes;
var listQuery = document.querySelectorAll("p");
divs[0].appendChild(document.createElement("p"));
//childNodes返回值为动态的,增加了一个p元素
console.log(listChild);//[text,p,text,p]
//querySelectorAll返回值为静态,没有变化
console.log(listQuery);//[p]
</script>
NamedNodeMap对象
NamedNodeMap对象比较少见,较为常见的是其实例对象attributes属性。
<div id="myDiv" class="bd"></div>
<script>
var div = document.getElementById("myDiv");
var attrs = div.attributes;
console.log(Array.prototype.toString.call(attrs));//"[object NamedNodeMap]"
console.log(attrs);// {0: id, 1: class, length: 2}
</script>
NamedNodeMap也是动态的
<div id="myDiv" class="bd"></div>
<script>
var div = document.getElementById("myDiv");
var attrs = div.attributes;
div.title = "hello";
console.log(attrs);//{0: id, 1: class, 2: title, length: 3}
</script>
注意:这3种对象基本都是动态集合(querySelectorAll获得的NodeList为静态),这会带来一些便利,但也会带来较大的性能开销。每次访问这类动态集合,都会执行一次文档的搜索,因此要尽量减少DOM操作。而对于与其相关的定值,比如divs.length,若需多次使用,可以考虑将其值缓存起来,以免每次应用时都要进行一次查询。
NodeList、HTMLCollection和NamedNodeMap的更多相关文章
- 深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap
× 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合, ...
- js复制对象 和 节点类型和NodeList
1. myList.cloneNode(true); 在参数为true的情况下,执行深复制,也就是复制节点及其整个子节点树,包括属性 2. myList.cloneNode(false); 在参数为f ...
- Js杂谈-DOM
前言 对jQuery的依赖.导致js的原生方法的淡忘,如果是封装自己的库,那势必要用到js的许多原生方法.从Jquery强大的dom处理开始,我们开始回顾javascript那些古老而坚挺的DOM方法 ...
- JavaScript 闯关记
DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API.DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 节点层次 DOM 可以将任何 HTML 或 XM ...
- ie使用firebug
在网页插入以下代码即可. <script type="text/javascript" src="http://getfirebug.com/releases/li ...
- JavaScript高级程序设计26.pdf
DOM操作技术 动态脚本 指得是页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本,跟操作HTML元素一样,创建动态脚本也有2种方式:插入外部文件和直接插入JavaScript代码 var ...
- 《JavaScript 闯关记》之 DOM(下)
Element 类型 除了 Document 类型之外,Element 类型就要算是 Web 编程中最常用的类型了.Element 类型用于表现 XML 或 HTML 元素,提供了对元素标签名.子节点 ...
- javascript 高级程序设计1--14章重点总结
js简介 首先介绍了js是一种专门与网页交互而设计的脚本语言.主要由ECMAScript 文档对象模型(DOM) 浏览器对象模型(BOM)三部分组成.分别用来提供核心语言,提供访问和操作网页内容的方法 ...
- DOM知识梳理
DOM 我们知道,JavaScript是由ECMAScript + DOM + BOM组成的.ECMAScript是JS中的一些语法,而BOM主要是浏览器对象(window)对象的一些相关知识的集合. ...
随机推荐
- 启动express,端口被占用
启动express项目报错: root@ubuntuServerVM:/home/nodejs/meadowlark/site# node meadowlark.jsevents.js:160 thr ...
- JavaScript的几种(原型)继承
定义Foo,Bar 其中,Bar继承Foo a是Bar的实例,包含有Foo和Bar的函数和属性: function Foo(name) { this.name = name; } Foo.protot ...
- vue封装插件并发布到npm上
vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...
- RestTemplate--解决中文乱码
[原文链接]:https://www.tecchen.xyz/rest-template-messycode.html 我的个人博客:https://www.tecchen.xyz 在开发扇贝-每日一 ...
- C# 并发队列ConcurrentQueue
测试函数 static async Task RunProgram() { var taskQueue = new ConcurrentQueue<CustomTask>(); var c ...
- Mac 10.12安装网站圆形设计工具Axure RP Pro 7
下载: (链接: https://pan.baidu.com/s/1hsaTafi 密码: 855y)
- 开源一个Java Class实现Openfire登陆、推出、消息发送,方便其他系统集成IM功能了
开源一个Java Class实现Openfire登陆.推出.消息发送 N年前写的,希望对Openfire开发新手有帮助哦 import java.util.*; import java.io.*; ...
- win10开启 linux Bash命令(win10内置了linux系统支持)
win10开启 Ubuntu linux Bash命令(win10内置了linux系统支持) 第一步: 先在设置→更新和安全→针对开发人员中选择"开发人员模式",点击后会下载&qu ...
- 【ORACLE】oracle 日志文件管理
修改Oracle重做日志文件大小 创建新的日志组1 删除旧的日志组0(旧的日志组状态需要是INACTIVE) 创建新的日志组2,组名为旧的日志组0的组名 删除日志组1 ---------------- ...
- First Android application
In eclipse ADT : 1.创建一个新工程 File -> New -> Android Application Project 2.三个主要的文件 /src/MainActiv ...