Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Метод getElementsByClassName() (https://javascript.ru/forum/misc/54046-metod-getelementsbyclassname.html)

krishna 01.03.2015 13:00

Метод getElementsByClassName()
 
Добрый день, возник глупый вопрос по поводу работы getElementsByClassName(). Я правда пытался нагуглить, читал руководство.
Суть вопроса проста, почему не работает скрипт?

<div class="box"> box </div>
<div class="box"> box2 </div>

<script>
var bg = document.getElementsByClassName("box");
bg.onmouseover = function() {
		bg.style.background = "#888"
}
</script>

В руководстве сказано:
метод getElementsByClassName() принимает единственный строковый аргумент.
Действительно, если использовать аргумент то обработчик применяется к одному из элементов. Но ведь он должен применяться ко всем элементам с указанным классом если не указан конкретный аргумент. Видимо я что-то упускаю, прошу помочь.

рони 01.03.2015 13:11

krishna,
надо в цикле применять onmouseover ко всем элементам bg - у Nodelist нет свойства onmouseover, а вот у элементов Nodelist оно вполне может быть

Safort 01.03.2015 15:19

krishna,
Цитата:

Но ведь он должен применяться ко всем элементам с указанным классом если не указан конкретный аргумент.
С чего бы? Такое только в jQuery и прочих библиотеках/фреймворках делается автоматом. В чистом JS всё ручками прописывать нужно.

Цитата:

Видимо я что-то упускаю, прошу помочь.
getElementsByClassName() выбирает список элементов. Поставить обработчик можно только одному конкретному элементу.
bg[0].onmouseover = .......

krishna 01.03.2015 20:18

Спасибо за ответы ребят.
<div class="box"> box </div>
<div class="box"> box2 </div>

<script>
var bg = document.getElementsByClassName("box");
for (var i = 0; i < bg.length; i++) {
bg[i].onmouseover = function() {
		this.style.background = "#888"
}
}
</script>


Часовой пояс GMT +3, время: 20:06.