Javascript document.GetElementsByCassName与getElementById不一样

我有这个代码（在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>

功能滑块关闭（el）{
var panel=document.getElementsByClassName（el）；
panel.style.transition=“top 0.5s减缓0s”；
panel.style.top=“-1000px”；
}

有点造型

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

#选择{背景：#f1f1；宽度：600px；高度：300px；}

以及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实现了这一点，但在使其用于类名时遇到了困难。如果您有任何建议，我将不胜感激

基本上

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"; 
});

您必须迭代每个元素以设置其

样式

/

属性

。使用

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"; 
} 

var panel=document.getElementsByClassName（el）；
对于（var i=0，len=panel.length；i基本上
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"; 
});

必须迭代每个元素以设置其
样式
/
属性
。使用
数组。从（节点列表）
将
节点列表
转换为本机
数组
对象。然后使用其
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"; 
} 

var panel=document.getElementsByClassName（el）；
for（var i=0，len=panel.length；idocument.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";    
    }    
}

document.GetElementsByCassName返回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";    
    }    
}

它返回一个数组，而不是一个元素请在你问新问题之前使用搜索。它返回一个数组，而不是一个元素请在你问新问题之前使用搜索。在ES6中，你实际上应该能够
for（面板的var elm）{…}
因为节点列表也应该是可迭代的。但不确定浏览器是否实现了这一点。@FelixKling如果它是一个可迭代的对象，那么我会建议使用spread运算符。我认为它还不受支持。如果我们想使节点列表对象被迭代，那么我们需要修改它的原型，如
nodeList.prototype[Symbol.iterator]=Array.prototype[Symbol.iterator]
在ES6中，您实际上应该能够
for（面板的var elm）{…}
因为节点列表也应该是可迭代的。但不确定浏览器是否实现了这一点。@FelixKling如果它是一个可迭代的对象，那么我会建议使用spread运算符。我认为它还不受支持。如果我们想使节点列表对象被迭代，那么我们需要修改它的原型，如
nodeList.prototype[Symbol.iterator]=Array.prototype[Symbol.iterator]
我以前没有使用过getElementsByClassName-只是在寻找Id的替代品时遇到的-我应该意识到使用复数元素创建数组！我以前没有使用过getElementsByClassName-只是在寻找Id的替代品时遇到的-我应该意识到使用复数元素创建数组是的！