javascript - 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。它是复数形式，因此可以并且很可能会返回超过 1 个元素。
这些元素将存储在一个类似对象的数组中（的实例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上的
类的 详细信息 请注意，某些版本的 FireFox 将返回一个未调用的对象，而是 Mozilla 自己的 DOM API 超集，它扩展了构造函数。我不记得那个物体叫什么 ATM，但我想起来后会再联系NodeList
NodeListNodeList

Answer 2

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

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

Answer 3

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

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

你错过了[0]。