document.getElementsByClassName не работает, как getElementById

Question

У меня есть этот код (работает на www.dtwdev.co.uk/errors/index.html)

который в основном следующие:

<script> 
function slideUpClose(el) { 
    var panel = document.getElementsByClassName(el); 
    panel.style.transition = "top 0.5s ease-out 0s";  
    panel.style.top = "-1000px";  
} 
</script> 

с немного стайлинг

<style> 
    #selection {background:#f1f1f1; width:600px; height:300px;} 
</style> 

и HTML:

<div id="selection" class="slideUp">Content heading 
    <div> 
     <button class="close_button" id="close_this_content_panel" onclick="slideUpClose('slideUp')">Click to close</button> 
     <p>Some content goes here</p> 
    </div> 
</div> 

Что я ищу, это когда кнопка нажата, панель содержимого должна выдвигаться вверх и выходить из окна. Мне удалось заставить это работать с document.getElementById, но у меня проблемы с его работой для имен классов. Поблагодарили бы за любой совет!

Answer 1

В основном document.getElementsByClassName вернет nodeList.

var panel = document.getElementsByClassName(el); 
Array.from(panel).forEach(function(elm){ 
elm.style.transition = "top 0.5s ease-out 0s";  
elm.style.top = "-1000px"; 
}); 

Вы должны перебрать каждый элемент, чтобы установить его style/attribute. Используйте Array.from(nodeList), чтобы преобразовать nodeList в родной array объект. Затем используйте функцию forEach для повторения по каждому элементу.

Если среда не поддерживает ES6 затем использовать следующий код,

var panel = document.getElementsByClassName(el); 
for(var i=0,len=panel.length;i<len;i++){ 
    panel[i].style.transition = "top 0.5s ease-out 0s";  
    panel[i].style.top = "-1000px"; 
} 

Answer 2

document.getElementsByClassName возвращает HTMLCollection, а не один элемент. Вы можете цикл элементы, чтобы манипулировать всеми из них

function slideUpClose(el) { 
    var panels = document.getElementsByClassName(el); 
    Array.prototype.forEach.call(panels, function(panel) { 
     panel.style.transition = "top 0.5s ease-out 0s";  
     panel.style.top = "-1000px";  
    }  
}