1. 常见问题
document.getElementsByTagName()返回值样式是[…,…,…]，很多人误以为是数组，进而对它调用数组方法如sort()，但是这样会报错:TypeError:xxx.sort is not a function，因为返回值其实是一个伪数组，像函数的arguments也是伪数组。
2. 返回值
<body>
<div class="box1" id="frame1"></div>
<div class="box2" id="frame2"></div>
<script>
divObjs=document.getElementsByTagName("div");
console.log(divObjs);
console.log(Object.prototype.toString.call(divObjs));
</script>
</body>
在IE8中显示
在IE11中显示
在Chrome中显示
在Firefox中显示
可见，该方法（除IE8）返回值是HTMLCollection类型，是元素节点集合。这个集合是动态的，它会根据DOM树的变化自动更新，而不必再次调用getElementsByTagName方法更新数据。查看资料发现之前在WebKit 内核浏览器中返回的是NodeList。那么两者有什么不同？
3. HTMLCollection与NodeList区别
NodeList 对象是各节点的集合，而HTMLCollection是元素的集合，显然NodeList范围更广。
NodeList 是由 Node.childNodes 和 document.querySelectorAll 返回。Node.childNodes返回的NodeList与HTMLCollection一样都是动态更新的，而document.querySelectorAll返回的是静态的NodeList，不会自动更新。
二者都有length属性和item(index)方法（该方法等价写法
HTMLCollection[index]/NodeList[index]）。而HTMLCollection还有namedItem()方法（该方法等价写法HTMLCollection[id]），根据 id 或name返回指定节点。
4. 解决办法（伪数组转成数组）
如果想对getElementsByTagName()返回值调用数组方法该怎么办？
// 法一：
console.log(Array.prototype.slice.call(divObjs));
// 法二：ES6语法
console.log(Array.from(divObjs)); //此方法IE不支持
// 法三：声明一个空数组，遍历伪数组中的元素添加到空数组中。
参考文档
Document.getElementsByTagName()
HTMLCollection
NodeList
扫一扫
1895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
