javascript 解析不起作用 document.getElementsByClassName.

javascript parsing not working document.getElementsByClassName

本文关键字：document getElementsByClassName 不起作用 javascript      更新时间：2023-09-26

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

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

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

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

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

查看 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 上NodeList类的详细信息，请单击此处
请注意，某些版本的FireFox将返回一个不称为NodeList的对象，而是Mozilla自己的DOM API超集，它扩展了NodeList构造函数。我不记得那个物体叫什么ATM，但一旦我想起来，我会重新联系的。

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

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

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

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

你错过了[0].

相关文章：