关于ES5中的document.getElementsByTagName

Question

题目描述

面试官问我，循环遍历document.getElementsByTagName('div')的所有div的方法
我说用for循环，他说不是，请问到底是怎么回事，我现在很蒙圈啊

题目来源及自己的思路

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

for 循环是绝对可以的，估计并不是面试官所期待的吧。

因为 document.getElementsByTagName('div') 得到的是类数组对象，并不是真正的数组，

可能是希望你将类数组对象转换成数组对象，然后用数组的map forEach等方法吧

Answer 2

for循环是可以的。

var nodeList = document.getElementsByTagName('div'); 
for (var i = 0; i < nodeList.length; i++) {
    // code here
    console.log(1);
}

面试官可能更希望你回答出，这是array-like-object 类数组对象，怎么转换成数组。再做循环。

方案一：ES5 Array.prototype.slice.call

var nodeList = document.getElementsByTagName('div'));
var nodeArr = Array.prototype.slice.call(nodeList);
// [].slice.call() 这个也可以
Array.isArray(nodeArr); // true
nodeArr.forEach(() => {
    console.log(1);
});

方案二：ES6 扩展符 ...

// NodeList对象
var nodeArr = [...document.querySelectorAll('div')];
nodeArr.forEach(() => {
    console.log(1);
});

方案三：ES6 Array.from

Array.from(document.querySelectorAll('div')).forEach(() => {
    // code here
    console.log(1);
});

面试官应该是想要你说出转成数组这三种方案。希望对你有帮助~

Answer 3

调用getElementsByTagName , document.childNodes 之类的方法，它们返回NodeList对象都属于伪数组。不能应用 Array下的 循环、push 等方法。先转成数组再处理:

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("div"));
domNodes.forEach(function(){
  //.....
})

Answer 4

MDN上也是用for循环遍历的，有什么不妥吗？MDN