替换图片文字 - 的JavaScript（getElementsByClass）

Question

我有一个跨度：

<span class="attr attr-value">Brand Name</span> 

而且我想，以取代一个形象，文本，根据文本

这里是我有：

<script type="text/javascript"> 
var oldHTML = document.getElementsByClass('attr-value').innerHTML; 
var filename = oldHTML.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,''); 
var newHTML = "<img src='http://www.example.com/" + filename + ".jpg'>"; 
document.getElementsByClass('attr-value').innerHTML = newHTML; 
</script> 

我在这里做错了什么？

Answer 1

它应该是，（例如）

document.getElementsByClassName('attr-value')[0]; 

Answer 2

此行是一个问题：

var oldHTML = document.getElementsByClass('attr-value').innerHTML; 

document.getElementsByClass应该是document.getElementsByClassName，并返回一个NodeList，它不具有innerHTML财产。您需要遍历NodeList来查看每个元素的innerHTML。

像这样的东西（live example）：

<script type="text/javascript"> 
(function() { 
    var list, index, element, filename; 
    list = document.getElementsByClassName('attr-value'); 
    for (index = 0; index < list.length; ++index) { 
     element = list[index]; 
     filename = element.innerHTML.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,''); 
     element.innerHTML = "<img src='http://www.example.com/" + filename + ".jpg'>"; 
    } 
})(); 
</script> 

变化：

1. 把整个事情在一个匿名函数，并立即执行该功能，避免产生全局符号。
2. 使用正确的getElementsByClassName
3. 遍历他们
4. 操作上的各个元素的innerHTML。

注：

• IE没有getElementsByClassName，所以你要确保你加载脚本，提供它的IE浏览器。这在上面的实例中没有提供，请使用Firefox，Chrome或Opera。 （只需搜索“getElementsByClassName for IE”，你会发现有几种实现可供选择。）
• 以上script标记将需要放置在HTML文件中要处理的所有元素之后。

Answer 3

• class="attr attr-value"和你打电话
  document.getElementsByClass('attr-value').innerHTML

• document.getElementsByClassName();