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)对象的一些相关知识的集合. ...
随机推荐
- java爬虫中jsoup的使用
jsoup可以用来解析HTML的内容,其功能非常强大,它可以向javascript那样直接从网页中提取有用的信息 例如1: 从html字符串中解析数据 //直接从字符串中获取 public stati ...
- C#-WebForm-★★★JQuery知识——DOM操作★★★
例如: $("#btn1").attr( "disabled" , "disabled" ); 例如: $("#d1") ...
- java中复制bean
BeanUtils.copyProperties(p,d); p是等待被赋值的对象,d是源对象,将d中属性值赋值的p中对应的字段,d中有的属性p中必须有,p可以有更多属性
- Python 全栈开发:str(字符串)索引和切片
str(字符串)索引和切片 str(字符串)索引: #计算机中大部分索引以0为开始 s = 'mylovepython' s1 = s[0] s2 = s[4] s3 = s[-1] print(s1 ...
- pytest文档博客链接
关于pytest的博客: https://www.cnblogs.com/yoyoketang/tag/pytest/default.html?page=2
- 在Android中调用KSOAP2库访问webservice服务出现的服务端传入参数为null的问题解决
ksoap2-android-3.0.0-jar 第三方库来调用.net 写的Web Service 如果没有参数,那么调用一切顺利,但是如果服务是带参数的,那么服务端接收的参数都是nul. ...
- 2-9 js基础 cookie封装
// JavaScript Document 'use strict'; function setCookie(sName,sValue,iDay){ if(iDay){ var oDate = ne ...
- Maven 打包的时候报 Failed to execute goal org.codehaus.mojo:native2ascii-maven-plugin
错误信息: [ERROR] Failed to execute goal org.codehaus.mojo:native2ascii-maven-plugin:1.0-alpha-1:native2 ...
- Android Anwendungsprogramm Entwicklung
1.Einführung des Androids 1.1 Grundlage der Anwendung Activity ist eine Spezifische Bespiel von Andr ...
- [PY3]——内置数据结构(2)——元组及其常用操作
定义和初始化 #tuple() 使用工厂函数tuple定义一个空元组 #() 使用圆括号定义一个空元组 #(1,2,3) 使用圆括号定义有初始值的元组 #tuple(可迭代对象) 把可迭代对象转换为一 ...