javascript解析不起作用document.getElementsByClassName答案

【问题标题】：javascript parsing not working document.getElementsByClassNamejavascript解析不起作用document.getElementsByClassName
【发布时间】：2013-11-07 03:58:26
【问题描述】：

我在页面的源代码中有这段代码：

<a data-toggle="dropdown" class="user" href="#">Tom</a>

我尝试使用以下代码解析字符串“Tom”：

var username = document.getElementsByClassName("user").innerHTML;
alert(username);

但是用户名变量未定义，代码有什么问题？我不想使用 jQuery。

【问题讨论】：

+1 因为不想用 jQ 来做这样的事情......这表明你愿意付出努力，自己学习使用 JS 和（笨重的）DOM API，而不是而不是依赖一个经常被滥用的工具

标签： javascript dom

【解决方案1】：

查看 DOM 方法的名称：getElement*s*ByClassName。它是复数形式，因此可以而且很可能会返回多个元素。
这些元素将存储在一个类似对象的数组中（NodeList 的实例）。

var usernames = document.getElementsByClassName('user');
var first = usernames[0];

但实际上，getElementsByClassName 没有得到很好的支持，最好使用querySelectorAll（比较the querySelector support 的支持与the getElementsByClassName 的支持，尤其是在 IE 中）

var usernames = document.querySelectorAll('.user');
var first = usernames[0];

此外，使用这些选择器，您可以绕过查询整个 DOM：

var username = document.querySelector('.user');//gets just one

注意：
the NodeList class on MDN here的详细信息
请注意，某些版本的 FireFox 将返回一个不称为 NodeList 的对象，而是 Mozilla 自己的 DOM API 超集，它扩展了 NodeList 构造函数。我不记得那个物体叫什么 ATM，但我会在想起来后与我们联系

【讨论】：

【解决方案2】：

您只是错过了 [0] 来获取第一个元素。

var username = document.getElementsByClassName("user")[0].innerHTML;

【讨论】：

【解决方案3】：

与document.getElementById 不同，document.getElementsByClassName 方法返回具有您指定类的元素数组。在这种情况下，您可能需要选择其中的第一个。

var username = document.getElementsByClassName("user")[0].innerHTML;
alert(username);

你错过了[0]。

【讨论】：