phpjsJqueryhtmlcssblog

Метод getelementsbyclassname javascript

Метод getElementsByClassName. Как работает метод getElementsByClassName, примеры использования. Синтаксис.

Подробно о Методе getelementsbyclassname в javascript

1. Синтаксис getElementsByClassName:
2. Живой пример работы getElementsByClassName

Скопировать ссылку



Синтаксис getElementsByClassName:

Что такое getElementsByClassName? getElementsByClassName - это метод, который соберет все элементы с указанным классом в массив(объект )массивоподобный объект) )

document.getElementsByClassName("example");
Для лучшего понимания работы метода getElementsByClassName соорудим маленький стенд:


Который будет составлять из нескольких элементов Dom, это :

button

div

input

Пример вывода данных элементов: <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=&quot;background:blue&quot;'">[0] - нулевая ячейка коллекции</button>

<button onclick="document.getElementsByClassName('example')[1].innerHTML=' style=&quot;background:blue&quot;'">[1] - первая ячейка коллекции</button>

<button onclick="document.getElementsByClassName('example')[2].innerHTML=' style=&quot;background:blue&quot;'">[2] - вторая ячейка коллекции</button>

Выведем выше приведенный код прямо здесь:

Чтобы увидеть результат работы метода getElementsByClassName нажмите по очереди ниже приведенные кнопки:

<button class="example">button</button>

<div class="example">div</div>

<input name="text" type="text" class="example">

[0] - нулевая ячейка коллекции
[1] - первая ячейка коллекции
[2] - вторая ячейка коллекции

Вывод в консоль результат работы метода getElementsByClassName

Давайте выведем в консоль объект полученный с помощью getElementsByClassName:

console.log(document.getElementsByClassName("example"));

Если вы открыли консоль, то должны были увидеть вот такую картину:


Скопировать ссылку



Живой пример работы getElementsByClassName

В следующем Пункте приведем тот стенд с работой метода getElementsByClassName :

Html код

button
div
И три кнопки:

Н и собственно вам осталось только всего - проверить как работает метод getElementsByClassName :

button
button
button

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---