javaScript之NodeList

NodeList对象

是DOM操作取出的集合(实际上是基于DOM结构动态查询的结果),用来保存一组有序的节点,可以通过位置来访问这些节点,它并不是array的实例。

Nodelist最大的特点就是它的时效性,DOM结构的变化能自动反映在Node List对象中。也就是说当DOM结构发生变化时,NodeList立刻会发生变化。

NodeList对象转为数组方法:

Array.prototype.slice.call(someNode.childNodes, 0) 或 [].slice(someNode.childNodes, 0)

由于IE8及更早版本不支持该方法,所以要使用手动枚举:

function covertToArray(nodes){
  var array = null;
try{
   array = Array.prototype.slice.call(nodes, 0);//非IE浏览器
}catch{
   array = new Array();
   for(var i, len = nodes.length; i<len; i++){
      array.push(nodes[i]);
   }
}
   return array;

}
时间: 2024-08-08 13:51:04

javaScript之NodeList的相关文章

在javascript将NodeList作为Array数组处理的方法

转自:http://www.jb51.net/article/24182.htm var anchors = document.getElementsByTagName("a"); for (i = 0; i < anchors.length; i++) { var ele=anchors[i];//取某一个元素 //some code here } 上面的代码表示获取文档中的所有链接元素,然后遍历做一些事情. 也许你会问,通过这种方法获取的这一组dom元素不就是一个数组吗?你看

javascript:NodeList 接口,HTMLCollection 接口

原文章:https://wangdoc.com/javascript/index.html NodeList 接口,HTMLCollection 接口 节点都是单个对象,有时需要一种数据结构,能够容纳多个节点.DOM 提供两种节点集合,用于容纳多个节点:NodeList和HTMLCollection. 这两种集合都属于接口规范.许多 DOM 属性和方法,返回的结果是NodeList实例或HTMLCollection实例.主要区别是,NodeList可以包含各种类型的节点,HTMLCollecti

JavaScript NodeList和Array

原文:JavaScript NodeList和Array 原文引用脚本之家作者:Jeff Wong,谢谢大神提供资源 在Web前端编程中,我们通常会通过document.getElementsByTagName或者document.getElementsByClassName的方法取出一组相同标签的dom元素.如下 var anchors = document.getElementsByTagName("a"); for (i = 0; i < anchors.length; i

深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

× 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合,以及这些动态集合有什么表现.区别和联系?可能好多人就要摇头了.本文就javascript中的动态集合做详细介绍 NodeList NodeList实例对象是一个类数组对象,它的成员是节点对象,包括childNodes和querySelectorAll()方法返回值 <div id="test&

javascript高级程序设计---NodeList和HTMLCollection

节点对象都是单个节点,但是有时会需要一种数据结构,能够容纳多个节点.DOM提供两种接口,用于部署这种节点的集合分别是NodeList和HTMLCollection MDN上的定义: NodeList: NodeList对象是通过Node.childNodes和document.querySelectorAll方法返回的(collections of nodes)节点的集合, NodeList一般是动态集合live collection, 是即时更新的(live):当其所包含的文档结构发生改变时,

转---深入浅出妙用 Javascript 中 apply、call、bind

作者:伯乐在线专栏作者 - chokcoco 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师的一篇文章的一句话: "对我来说,博客首先是一种知识管理工具,其次才是传播工具.我的技术文章,主要用来整理我还不懂的知识.我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写.炫耀从来不是我的动机,好奇才是." 对于这句话,不能赞同更多,也让我下决心好好写这篇,网上文章虽多,

深入浅出 妙用Javascript中apply、call、bind

apply.call.bind的认识,并且列出一些它们的妙用加深记忆. apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. 先来一个栗子: 1 2 3 4 5 6 7 8 9 10 11 function fruits() {} fruit

任务四:基础JavaScript练习(一)

任务描述 如图,模拟一个队列,队列的每个元素是一个数字,初始队列为空 有一个input输入框,以及4个操作按钮点击队列中任何一个元素,则该元素会被从队列中删除 点击"左侧入",将input中输入的数字从左侧插入队列中: 点击"右侧入",将input中输入的数字从右侧插入队列中: 点击"左侧出",读取并删除队列左侧第一个元素,并弹窗显示元素中数值: 点击"右侧出",读取并删除队列又侧第一个元素,并弹窗显示元素中数值: 1 <

javascript高级程序设计 第十四章--表单脚本

javascript高级程序设计 第十四章--表单脚本 在HTML中表单由<form>元素表示,在js中表单对应的是HTMLFormElement类型,这个类型也有很多属性和方法:取得表单元素的引用还是为它添加id特性,用DOM操作来获取表单元素:提交表单:把<input>或<button>元素的type特性设置为"submit",图像按钮把<input>元素的type特性设置为"image",也可以调用submit(