javascript 中的nodeList理解

NodeList是一中类数组对象，用于保存一组有序的节点
可以通过方括号来访问NodeList的值，他有item()方法与length属性。
他并不是Array的实列，没有数组对象的方法。

如何拿到nodeList?

var box = document.getElementById('box');
var nodes = box.childNodes;

这样就可以拿到nodeList，我们可以在控制台看到

常用属性和方法
1.我们可以通过方括号来拿到节点，如：

        var box = document.getElementById('box');var nodes = box.childNodes;console.log(nodes[1]);

控制台就会打印出对应节点

2.也可以通过下面的方法访问节点

        console.log(nodes.item(1));

得到的效果是一样的

验证nodeList不是数组

        var box = document.getElementById('box');var nodes = box.childNodes;console.log(nodes.push('<li>2222</li>'));

这是控制台就会报错（push这个方法未定义）;
说明其不是数组。

怎样让他像数组呢？
你可能已经才到通过遍历把它转化为数组。

        var box = document.getElementById('box');var nodes = box.childNodes;function makeAarry(nodelist){var arr = [];for(var i=0,len = nodelist.length;i<len;i++){arr.push(nodelist[i]);}return arr;}var shownode = makeAarry(nodes);console.log(shownode);

这里还可以通过数组原形属性来实现

        var box = document.getElementById('box');var nodes = box.childNodes;function makeAarry(nodelist){// var arr = [];// for(var i=0,len = nodelist.length;i<len;i++){//     arr.push(nodelist[i]);// }// return arr;return Array.prototype.slice.call(nodelist);}var shownode = makeAarry(nodes);console.log(shownode);

效果是一样的（这个浏览器兼容是ie9+）；

实现兼容方法

         var box = document.getElementById('box');var nodes = box.childNodes;function makeAarry(nodelist){var arr = null;try{arr = Array.prototype.slice.call(nodelist);}catch(e){arr = [];for(var i=0,len = nodelist.length;i<len;i++){arr.push(nodelist[i]);}}// var arr = [];// for(var i=0,len = nodelist.length;i<len;i++){//     arr.push(nodelist[i]);// }return arr;//return Array.prototype.slice.call(nodelist);}var shownode = makeAarry(nodes);console.log(shownode);

javascript 中的nodeList理解相关推荐

javascript中 (function(){})();如何理解?
javascript中 (function(){})();如何理解? javascript中: (function(){})()是匿名函数,主要利用函数内的变量作用域,避免产生全局变量,影响整体页面环 ...
谈谈JavaScript中function多重理解
JavaScript 中的 function 有多重意义.它可能是一个构造器(constructor),承担起对象模板的作用: 可能是对象的方法(method),负责向对象发送消息.还可能是函数,没错 ...
Javascript中你必须理解的执行上下文和调用栈
执行上下文在 JavaScript 是非常重要的基础知识,想要理解 JavaScript 的执行过程,执行上下文是你必须要掌握的知识.否则只能是知其然不知其所以然. 理解执行上下文有什么好处呢? 它可 ...
javascript中的面向对象理解（一）
一.注意:提到"面向对象"这一概念,众所周知,javascript中的面向对象思想与其他的编程语言(例如:PHP.Java等)是有着很大区别的.因此,我们先复习下,传统意义上,面向 ...
javascript中bind函数理解
bind函数会创建一个新的函数体: bind函数第一个参数是改变this的指向,第二个以及之后的每个参数都是传进去原来的函数参数: bind函数是在Function原型上的: bind 函数可以用来递 ...
JavaScript中事件回顾
事件其实在第一次学习JavaScript的时候就接触了,一行非常简单的代码 alert('Hello JavaScript!!!')就诠释了什么是事件.事件是什么呢?事件在基于浏览器编程的语言Java ...
JavaScript中undefined详解
目录一.前言二.undefined的特点 1.undefined既是JavaScript中的原始数据类型之一,也是一个原始值数据 2.undefined是全局对象上的一个属性 3.undefine ...
深入理解javascript中的立即执行函数(function(){…})()
2019独角兽企业重金招聘Python工程师标准>>> javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各 ...
JavaScript中的call、apply、bind深入理解
一.函数的三种角色首先要先了解在函数本身会有一些自己的属性,比如: length:形参的个数: name:函数名: prototype:类的原型,在原型上定义的方法都是当前这个类的实例的公有方法: ...

javascript 中的nodeList理解

javascript 中的nodeList理解相关推荐

最新文章

热门文章