Изменение стиля нескольких элементов с помощью свойств объекта javascript

Question

(Javascript) Я украл этот очень хороший код из другого сообщения здесь.
Это изменяет style.backgroundColor тех div элементов с .onmouseover.

<div id='idEl' class='classEl'>1</div> 
<div id='idEl' class='classEl'>2</div> 
<div id='idEl' class='classEl'>3</div> 
<div id='idEl' class='classEl'>4</div> 
<div id='idEl' class='classEl'>5</div> 
<script> 
    var div = document.getElementsByTagName("div"); 
    for(var i = 0; i < div.length; i++) { 
    div[i].onmouseover = function() { 
    this.style.backgroundColor = "green"; 
    } 
</script> 

Это работает, но вместо того, чтобы делать это с TagName (что бы испортить все мои другие десятки div), я хотел бы, чтобы заставить его работать с id (если это даже possibile) или с className.
И без использования html attributes все должно быть выполнено через object properties внутри <script>.
Было бы здорово, если бы даже могучий addEventListener мог работать.

Answer 1

просто изменить getElementsByTagName к getElementsByClassName

здесь является Working fiddle и КОДА -

<div id='idEl' class='classEl'>1</div> 
<div id='idEl' class='classEl'>2</div> 
<div id='idEl' class='classEl'>3</div> 
<div id='idEl' class='classEl'>4</div> 
<div id='idEl' class='classEl'>5</div> 
<script> 
    var div = document.getElementsByClassName("classEl"); 
    for(var i = 0; i < div.length; i++) { 
    div[i].onmouseover = function() { 
    this.style.backgroundColor = "green"; 
    } 
    } 

</script> 

Примечание - Вам также не хватает закрывающего кронштейна }, который я поставил над кодом, и вы используете одинаковые идентификаторы для каждого div, что неверно, поскольку идентификаторы должны быть уникальными.

Answer 2

Чтобы получить элементы по классу CSS вы можете использовать функцию getElementsByClassName

document.getElementsByClassName("classEl"); 

Обратите внимание, что это лучше, чем с помощью «идентификатора» в вашем случае, поскольку HTML дозы не позволяют нескольких одинаковых идентификаторов на тот же самом документе ,

Чтобы получить элемент (не элементы) вы можете:

document.getElementById("my_unique_id"); 

Вы можете увидеть рабочий пример - here