调用getElementsByTagName循环时出现额外函数输出的问题

你遇到的问题核心在于：getElementsByTagName() 返回的不是普通 JavaScript 数组，而是一个 HTMLCollection——这是浏览器提供的动态类数组对象，除了存储元素的索引属性（0、1、2...），它还自带了一些内置方法和属性，比如 item()、length 等。

而 for...in 循环的作用是遍历对象的所有可枚举属性，包括对象自身和原型链上的可枚举属性。所以当你用它遍历 HTMLCollection 时，不仅会拿到各个 div 元素的索引项，还会把 item() 这类内置方法也当作属性遍历出来，这就是为什么会多输出一项。

你的代码示例大概是这样： #

const divElements = document.getElementsByTagName('div');
for (let prop in divElements) {
  console.log(divElements[prop]);
}

正确的遍历方式 #

推荐用以下几种方法来遍历 HTMLCollection，避免拿到额外属性：

1. 普通 for 循环（最兼容）

const divElements = document.getElementsByTagName('div');
for (let i = 0; i < divElements.length; i++) {
  console.log(divElements[i]);
}

2. 转成数组后用 forEach
   把类数组对象转成真正的数组，就能用数组的遍历方法：

// 方法1：Array.from
const divArray = Array.from(document.getElementsByTagName('div'));
divArray.forEach(div => console.log(div));

// 方法2：展开运算符
[...document.getElementsByTagName('div')].forEach(div => console.log(div));

3. for...of 循环（ES6+）
   HTMLCollection 是可迭代对象，支持直接用 for...of 遍历：

const divElements = document.getElementsByTagName('div');
for (let div of divElements) {
  console.log(div);
}

内容的提问来源于stack exchange，提问作者tatactic