JavaScript新手咨询：getElementsByName返回值中[0]的含义及术语

嘿，很高兴你在学习JavaScript的DOM操作！让我来帮你拆解这个问题：

1. getElementsByName的返回值 #

document.getElementsByName('width')这个方法会返回一个HTMLCollection——这是一个类数组对象，它会收集页面上所有name属性等于指定值的元素。因为页面里可能存在多个同名的输入框（比如表单里的多选框经常用相同name），所以方法会把匹配到的元素按它们在DOM中的顺序存成一个集合。

2. [0]的作用与专业名称 #

这里的[0]是方括号表示法（Bracket Notation），用来访问类数组对象（或数组）中指定索引位置的元素。

在JavaScript里，数组/类数组对象的索引是从0开始计数的，所以[0]就代表取这个集合里的第一个元素。你的代码里，这一步就是拿到页面上第一个name为width的输入框元素，之后再通过.value获取它的输入值。

3. 结合你的代码理解 #

看你这段代码：

function func() { 
  var base = document.getElementsByName('width')[0].value; 
  // 后续计算面积的逻辑...
}

它的执行流程是：

• 找到所有name属性为width的DOM元素，得到一个类数组集合
• 用[0]取出集合里的第一个元素（也就是你需要的那个输入框）
• 读取这个输入框的.value属性，把用户输入的尺寸赋值给base变量，供后续面积计算使用

小提示（适合新手） #

如果你的页面里只有一个name为width的输入框，用[0]完全没问题。不过你也可以用更直观的document.querySelector('input[name="width"]')来直接获取第一个匹配的元素，这样就不需要加[0]了，代码会变成：

var base = document.querySelector('input[name="width"]').value;

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