Как работает getElementsByClassName?

Question

[Джавараст Скриптович]

Задача:
Есть множество элементов с классом "Item". При клике по любому из них, тот, по которому кликнули переносится из элемента с идентификатором "container_1" во второй элемент с идентификатором "container_2".

Я застрял на этапе считывания клика по элементу с выше упомянутым классом
Мои попытки:

document.getElementsByClassName('Item').onclick=func_PEREMESTIT;
document.getElementsByClassName('Item')[1].onclick=func_PEREMESTIT;
document.getElementsByClassName('Item')[*].onclick=func_PEREMESTIT;

(В "func_PEREMESTIT" просто выплывает алерт)

Первый и третий варианты не работают
Второй вариант работает, но только со вторым элементом (по счету от 0), т.е. с определенным
Третий вариант забавный, согласен)) Просто перенял фичу из CSS)))

Я реализовал задачу посредством магического jQuery, но я хочу знать, как реализуется это через голый JS, дабы я не испытывал проблем с переводом полу-фреймворкового скрипта на "чистый" JS, во имя оптимизации)))

Answer 1

[Stalker_RED]

getElementsByClassName() возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствуюих всем из указанных имен классов.

https://developer.mozilla.org/ru/docs/Web/API/Docu...

То есть там не один элемент возращается, а некий список. Вам придется открыть учебник и прочитать что такое "массив". И как обращаться к элементам массива.

Ну или научиться в делегирование, но это еще сложнее.

Comments

[Джавараст Скриптович]

Я так понимаю, нет такого же компактного решения, как в случае с идетификатором?

document.getElementById('Item').onclick=func_PEREMESTIT;

[Stalker_RED]

M4mkin_pr0ger, getElement и getElements - разницу замечаете?
Примерно такая-же как querySelector() и querySelectorAll()

[Джавараст Скриптович]

Какая разница, замечаю я это или нет?
Я и так понимаю, что возвращается не одно значение
Я спрашивал о том, получится-ли так же кратко описать реакцию на событие клика, как в случае с id..

[Алексей Уколов]

Опасно использовать слово "массив" в таком контексте. HTMLCollection не наследуется от массива и не имеет его методов (хотя, вроде, в каких-то современных браузерах это закостылили). По ней можно итерировать через for () {}, а вот .forEach() работать не будет.

[Stalker_RED]

M4mkin_pr0ger, какая разница получится ли у вас коротко написать?

Не смотря на то, что вы в заголовке спрашивали "как работает" складывается впечатление, что вам все равно один элемент возвращается или коллекция, и все равно что такое этот "onclick". Если вы просто хотите копировать некие "заклинания" без понимания того, как оно работает, то не буду мешать.

[Джавараст Скриптович]

Stalker_RED, я неправильно сформулировал вопрос в заголовке, это моя ошибка.

какая разница получится ли у вас коротко написать?

- ну тут просто без слов...

На самом деле я интересовался, получится-ли .onclick применить к getElementsByClassName так, что бы клик срабатывал на всех элементах с данным классом, не прибегая к созданию дополнительных функций и переменных? (мне каждый раз повторять один и тот же вопрос?)

Если вы просто хотите копировать некие "заклинания" без понимания того, как оно работает, то не буду мешать.

- если это к jQuery, то я уже говорил про него..

[Stalker_RED]

M4mkin_pr0ger, onclick это свойство элемента, у HtmlCollection и NodeList такого свойства нет.
Можно пройтись по списку и применить это к каждому элементу либо использовать делегирование. Эм..., кажется я повторяюсь.