为何getElementsByClassName失效但getElementById可正常工作？

嘿，我一眼就揪出问题所在啦！

• getElementById() 会直接返回单个DOM元素对象，所以你能直接调用它的.src属性，这也是它能正常工作的原因。
• 但 getElementsByClassName() 返回的是一个HTMLCollection（类数组对象）——哪怕页面上只有一个匹配该类名的元素，它也会把元素包裹在这个集合里。你直接给集合设置.src肯定无效啊，因为集合本身根本没有这个属性！

方案1：从类数组中取出目标元素 #

因为你的每个<a>标签里只有一个对应class的<img>，所以可以直接取集合的第一个元素（索引为0）：

onmouseover="document.getElementsByClassName('viewb')[0].src='images/edit.png';"
onmouseout="document.getElementsByClassName('viewb')[0].src='';"

⚠️ 注意：如果页面上还有其他viewb类的元素，这种方式可能会误操作到第一个匹配的元素，所以更稳妥的是用下面的方案。

方案2：用this精准定位当前元素 #

这种方式不会受其他同class元素的干扰，逻辑更清晰：

<a class="fancybox fancybox.iframe" href="#" title="Book Name" 
   onmouseover="this.querySelector('.viewb').src='images/edit.png';" 
   onmouseout="this.querySelector('.viewb').src='';">
    <img src="" class="viewb" align="right" width="15px" height="15px" />
</a>

这里的this指代当前触发鼠标事件的<a>标签，再用querySelector()找到它内部的.viewb元素，精准命中目标！

额外小建议 #

如果项目里有很多这类交互，最好把逻辑抽成单独的JS函数，代码会更易维护：

function toggleEditIcon(el, showIcon) {
  el.querySelector('.viewb').src = showIcon ? 'images/edit.png' : '';
}

然后HTML改成：

<a class="fancybox fancybox.iframe" href="#" title="Book Name" 
   onmouseover="toggleEditIcon(this, true);" 
   onmouseout="toggleEditIcon(this, false);">
    <img src="" class="viewb" align="right" width="15px" height="15px" />
</a>

内容的提问来源于stack exchange，提问作者Ronit