Метод getelementsbyclassname javascript
Метод getElementsByClassName. Как работает метод getElementsByClassName, примеры использования. Синтаксис.
Подробно о Методе getelementsbyclassname в javascript
Синтаксис getElementsByClassName:
Что такое getElementsByClassName? getElementsByClassName - это метод, который соберет все элементы с указанным классом в массив(объект )массивоподобный объект) )
Для лучшего понимания работы метода getElementsByClassName соорудим маленький стенд:
Который будет составлять из нескольких элементов Dom, это :
<button class="example">button</button>
<div class="example">div</div>
<input name="text" type="text" class="example">
Как вы наверное уже заметили, то у каждой кнопки есть некоторое отличие! Присутствие квадратных скобок и числа.
Что нам намекает, что мы будем оперировать с объектом(массивом).
Число будет показывать на каком по счету месте от верха страницы стоит элемент . Счет ведется от нуля.
<button onclick="document.getElementsByClassName('example')[0].innerHTML=' style="background:blue"'">[0] - нулевая ячейка коллекции</button>
<button onclick="document.getElementsByClassName('example')[1].innerHTML=' style="background:blue"'">[1] - первая ячейка коллекции</button>
<button onclick="document.getElementsByClassName('example')[2].innerHTML=' style="background:blue"'">[2] - вторая ячейка коллекции</button>
Чтобы увидеть результат работы метода getElementsByClassName нажмите по очереди ниже приведенные кнопки:
<button class="example">button</button>
<div class="example">div</div>
<input name="text" type="text" class="example">
Вывод в консоль результат работы метода getElementsByClassName
Давайте выведем в консоль объект полученный с помощью getElementsByClassName:
Если вы открыли консоль, то должны были увидеть вот такую картину:
Живой пример работы getElementsByClassName
В следующем Пункте приведем тот стенд с работой метода getElementsByClassName :
Html код
Н и собственно вам осталось только всего - проверить как работает метод getElementsByClassName :