为何JavaScript操作DOM时，不加[0]会返回undefined？

嘿，我来帮你把这个问题掰扯明白～

核心原因其实很简单：document.getElementsByName()返回的不是单个DOM元素，而是一个HTMLCollection（类数组的集合对象），哪怕页面里只有一个匹配name属性的元素，它也会被放进这个集合里，而不是直接返回元素本身。

咱们对比看你的两段代码：

第一段代码（正常工作的版本） #

var d = document.getElementsByName('msg')[0]
document.write(`<br> ${d.innerText}`)

<div id="msg" name="msg">click here</div>

这里的[0]是从HTMLCollection集合里取出了第一个（也是唯一一个）元素，这时候变量d就指向了页面里那个<div>元素，自然能正常访问它的innerText属性，所以输出的是click here。

第二段代码（返回undefined的版本） #

var d = document.getElementsByName('msg')
document.write(`<br> ${d.innerText}`)

<div id="msg" name="msg">click here</div>

这里的d是整个HTMLCollection集合对象，而这个集合对象本身并没有innerText这个属性，所以当你尝试访问d.innerText时，就会得到undefined。

额外补充 #

如果页面里有多个name为msg的元素，这个集合里就会包含所有匹配的元素，你需要通过对应的索引（比如[0]、[1]）来访问具体的元素。另外，你也可以用item(index)方法来取元素，比如document.getElementsByName('msg').item(0)，和[0]的效果是一样的。

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