Javascript разбора не работает document.getElementsByClassName

Question

У меня есть этот код в исходном коде страницы:

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

Я пытался разобрать строку «Том» с этим кодом:

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

Но переменная имени пользователя не определена, в чем проблема с кодом? Я не хочу использовать jQuery.

Answer 1

В отличие от document.getElementById, метод document.getElementsByClassName возвращает массив элементов, у которых есть указанный вами класс. В этом случае вы можете выбрать первый из них.

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

Вы пропустили [0].

Answer 2

Вы только что пропустили [0], чтобы получить первый элемент.

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

Answer 3

Посмотрите на имя метода DOM: getElement * S * ByClassName. Это множественное число, поэтому может и, скорее всего, вернет более 1 элемента.
Эти элементы будут храниться в массиве, таком как объект (пример 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, но я вернусь к нему, как только вспомню