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个元素这些元素将存储在类似于object（NodeList的实例）的数组中。

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

但实际上，getElementsByClassName不受支持，最好使用querySelectorAll（比较the querySelector support支持the getElementsByClassName支持，尤其是在IE中<） / p>

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的对象是什么，但是一旦我记得，我会再次联系到

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;

javascript解析不工作document.getElementsByClassName

3 个答案: