Распространенной задачей при написании JavaScript является выделение(поиск) нужных Вам элементов HTML – или проще говоря – тегов с заданным свойством. Часто таким свойством , выделяющим элемент среди сородичей, является значение ID. Как например : id=»myTag»

В отличие от идентификации тегов по их ID:
<div id="myTag"> Интересующий нас блок </div>

Поиск нужного блока по названию класса подразумевает, что таких блоков может быть несколько:
<div class="textBlock">Первый блок с текстом оформленным с помощью CSS класса txtBlock</div>
<div class="textBlock">Второй блок с текстом оформленным с помощью CSS класса txtBlock</div>
<div class="textBlock">Третий блок с текстом оформленным с помощью CSS класса txtBlock</div>
По-этому, метод поиска элемента по названию класса getElementsByClassName() возвращает не один объект, а целый список всех элементов. Нумерация , традиционно, начинается с нулевого элемента: [0] , затем [1] и так далее.

Итак , чтобы работать для примера со вторым блоком класса textBlock , код будет реализован следующим образом:

<!-- HTML часть -->
<div class="txtBlock"> Юрий Гагарин </div>
<div class="txtBlock"> Герман Титов </div>
<script>
/* javascript часть */
var elements = document.getElementsByClassName("txtBlock");
alert(elements[1].innerHTML);
</script>
<!-- во всплывающем окне скрипт покажет имя второго космонавта в истории -->


Самый простой, частный случай, когда в Вашем HTML- документе присутствует только один тег с оригинальным названием класса:

<span class="OneLove">Уникальное явление</span>

Тогда элемент имеет порядковый номер ноль:

var elements = document.getElementsByClassName("txtBlock");
var RealLove = elements[0];
alert(RealLove.innerHTML);

Что ещё можно сделать чтобы увеличить функционал данного метода? Допустим Вы не знаете заранее (или не хотите проверять) общее количество элементов с именем класса class=»myClass». Можно создать цикл посчитать элементы и вывести их содержимое в отдельный блок div с id=’result’:
<!-- HTML часть -->
<div class="txtBlock"> Юрий Гагарин </div>
<div class="txtBlock"> Герман Титов </div>
<div class="txtBlock"> Джон Глен </div>
<script>
/* javascript часть */
var elements = document.getElementsByClassName("txtBlock");
var newDivResult = ''; // переменная для итогового значения
var countElements = elements.length; // мы уже встречали length когда нужно было подсчитать элементы массивов
for(i=0;i<countElements;i++){
newDivResult += elements[i].innerHTML+"<br />и ";
}
</script>
<button type="button" onClick="document.getElementById('result').innerHTML=newDivResult+' все все - они смелые космонавты.'">Запустить!</button>

Результатом станет текстовый вывод всех космонавтов с переносом на следующую строку.