- 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);