返回值

1. 常见问题

()返回值样式是[…,…,…]，很多人误以为是数组，进而对它调用数组方法如sort()，但是这样会报错:TypeError: is not a function，因为返回值其实是一个伪数组，像函数的arguments也是伪数组。

2. 返回值

<body>
	<div class="box1" ></div>
	<div class="box2" ></div>

	<script>
		divObjs=("div");
		(divObjs);
		((divObjs));
	</script>
</body>

在IE8中显示
在这里插入图片描述
在IE11中显示

在Chrome中显示

在Firefox中显示

可见，该方法（除IE8）返回值是HTMLCollection类型，是元素节点集合。这个集合是动态的，它会根据DOM树的变化自动更新，而不必再次调用getElementsByTagName方法更新数据。查看资料发现之前在WebKit 内核浏览器中返回的是NodeList。那么两者有什么不同？

3. HTMLCollection与NodeList区别

NodeList 对象是各节点的集合，而HTMLCollection是元素的集合，显然NodeList范围更广。

NodeList 是由和返回。返回的NodeList与HTMLCollection一样都是动态更新的，而返回的是静态的NodeList，不会自动更新。

二者都有length属性和item(index)方法（该方法等价写法
HTMLCollection[index]/NodeList[index]）。而HTMLCollection还有namedItem()方法（该方法等价写法HTMLCollection[id]），根据 id 或name返回指定节点。

4. 解决办法（伪数组转成数组）

如果想对getElementsByTagName()返回值调用数组方法该怎么办？

// 法一：
((divObjs));

// 法二：ES6语法
((divObjs));  //此方法IE不支持

// 法三：声明一个空数组，遍历伪数组中的元素添加到空数组中。

在这里插入图片描述

参考文档
()HTMLCollectionNodeList

1. 常见问题

2. 返回值

3. HTMLCollection与NodeList区别

4. 解决办法（伪数组转成数组）

相关文章