如何实现将img的src改为PIC_BULBOFF.GIF？toUpperCase()结合getAttributeNode用法

嘿，我来帮你搞定这个问题！你的现有代码里toUpperCase()没生效，是因为没有正确获取原src属性的值就尝试转换，语法也有问题。下面给你两种可行的修正方案：

方案一：直接操作元素的src属性（推荐） #

这是最简洁常用的方式，DOM元素本身就有src属性可以直接读写，不需要借助getAttributeNode：

<img class="dd" src="pic_bulboff.gif" > 
<script> 
  // 获取目标img元素
  var x = document.getElementsByClassName("dd")[0];
  // 将当前src值转为大写后重新赋值
  x.src = x.src.toUpperCase();
</script>

方案二：使用getAttributeNode的方式 #

如果你一定要用getAttributeNode来操作，需要先获取到属性节点的当前值，再转大写赋值：

<img class="dd" src="pic_bulboff.gif" > 
<script> 
  var x = document.getElementsByClassName("dd")[0];
  // 获取src属性节点
  var srcAttribute = x.getAttributeNode("src");
  // 把属性节点的值转大写后重新赋值
  srcAttribute.value = srcAttribute.value.toUpperCase();
</script>

为什么原代码不生效？ #

原代码里的x.getAttributeNode("src").value = ///x.toUpperCase///;存在两个问题：

1. 没有获取到原src的字符串值，直接写x.toUpperCase()是错误的——x是DOM元素对象，不是字符串，不能直接调用toUpperCase()；
2. ///的写法是无效的注释或语法错误，正确的方式是先拿到原src的字符串，再调用其toUpperCase()方法。

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