Не работает анализ javascript document.getElementsByClassName

Question

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

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

Я попытался проанализировать строку "Том" с этим кодом:

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

Но переменная 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

Замечания:
Подробности на NodeList класс по MDN здесь
Обратите внимание, что некоторые версии Firefox будут возвращать объект, который не называется NodeList, но собственный расширенный набор DOM API в Mozilla, который расширяет NodeList конструктор. Я не могу вспомнить, что этот объект называется банкоматом, но я вспомню, как только вспомню

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],