JavaScript无法解析document.getElementsByClassName

Question

我在页面的源代码中有以下代码：

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

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

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

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

Answer 1

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

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

但是实际上，对getElementsByClassName支持不是很好，最好使用querySelectorAll （将querySelector支持的支持与getElementsByClassName支持进行比较，尤其是在IE中）

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

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

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

注意：
MDN上NodeList类的详细信息
请注意，某些版本的FireFox将返回一个不称为NodeList的对象，而是Mozilla自己的DOM API的超集，该对象扩展了NodeList构造函数。 我不记得那个被称为ATM的对象，但是一旦我记得，我会重新联系

Answer 2

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

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

您错过了[0] 。

Answer 3

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

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