Javascript getElementsByClassName不工作，而ID正在工作。为什么？

我同时使用了

getElementsByClassName

和

getElementById

。后一个（ID）正在工作，但类不工作。我有多个

td

，所以我想使用class而不是ID，但它不起作用。问题在哪里

<table>
<tr>
<td>ID</td>
<td><span style="vertical-align:middle;">Id is</span>
<a class="fancybox fancybox.iframe" href="#" title="Book ID" onmouseover="document.getElementById('viewa').src='images/edit.png';" onmouseout="document.getElementById('viewa').src='';"><img src="" id="viewa" align="right" width="15px" height="15px" /></a></td>
</tr>

<tr>
<td>Book Name</td>
<td><span style="vertical-align:middle;">Name is </span>
<a class="fancybox fancybox.iframe" href="#" title="Book Name" onmouseover="document.getElementsByClassName('viewb').src='images/edit.png';" onmouseout="document.getElementsByClassName('viewb').src='';"><img src="" class="viewb" align="right" width="15px" height="15px" /></a></td>
</tr>

</table>

身份证件
身份证是
书名
名字是

如果您同意使用jquery，那么您可以查看下面的答案。但是如果您真的想使用纯javascript，那么您可以尝试以下代码

<table>
<tr>
<td>ID</td>
<td><span style="vertical-align:middle;">Id is</span>
<a class="fancybox fancybox.iframe" href="#" title="Book ID" 
onmouseover="onmouseoverevent(this)" onmouseout="onmouseoutevent(this)"><img 
src="" id="viewa" align="right" width="15px" height="15px" /></a></td>
</tr>

<tr>
<td>Book Name</td>
<td><span style="vertical-align:middle;">Name is </span>
<a class="fancybox fancybox.iframe" href="#" title="Book Name" 
onmouseover="onmouseoverevent(this)" onmouseout="onmouseoutevent(this)"><img 
src="" class="viewb" align="right" width="15px" height="15px" /></a></td>
</tr>

</table>

<script>

function onmouseoverevent(elem)
{
elem.getElementsByTagName('img')[0].src='images/edit.png';
}

function onmouseoutevent(elem)
{
elem.getElementsByTagName('img')[0].src='';
}
</script>

身份证件
身份证是
书名
名字是
mouseoverevent（elem）的功能
{
elem.getElementsByTagName（'img'）[0].src='images/edit.png'；
}
mouseoutevent函数（elem）
{
elem.getElementsByTagName（'img'）[0].src=''；
}

GetElementById

返回单个元素，因为ID是唯一的。但类不是，所以

GetElementsByClassName

返回一个元素数组

因此，您必须使用

GetElementsByClassName（“foo”）[0]

来获取foo类的第一个元素

---

如果你想在类的所有元素上执行它，你必须做一个for循环。

将内联的普通JavaScript注入HTML属性有点超过使用库的目的（你根本不用库）。明智的jQuery习惯用法如下：

jQuery（函数（$）{
$（“表a”）
.on（“鼠标悬停”，函数（）{
$（this.find（“img”）.attr（“src”），”http://placehold.it/15x15");
}) 
.on（“mouseout”，函数（）{
$（this.find（“img”）.attr（“src”），“”）；
});
});

身份证件
身份证是
书名
名字是
getElementsByClassName
是一个
HTMLcollection
您不能只分配。请确保您理解jQuery和vanilla JavaScript之间的区别。您正在使用后者，希望它的行为与前者相同。这不起作用，因为数组索引位于错误的位置：
getElementsByClassName[0]（'viewb'）
应改为
getElementsByClassName（'viewb'）[0]
谢谢@Henkan工作正常。但是对于每个td，我必须更改[0]并用数组号替换它。实际上，我想为每个td显示悬停图像，但css不起作用。是否有任何方法可以将同一类应用于多个td，以便在每个td上悬停时显示相同的图像？提前感谢Hanks@ManishMaharjan工作正常。但是对于每个td，我必须更改[0]并用数组号替换它。实际上，我想为每个td显示悬停图像，但css不起作用。是否有任何方法可以将同一类应用于多个td，以便在每个td上悬停时显示相同的图像？提前谢谢