は、画像とテキストの置換 - の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であるべきであり、それはinnerHTML性質を持っていないNodeListを返します。 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. 匿名関数に全部を入れて、すぐにその機能を実行し、グローバルシンボルを作成しないように。
3. それらを介して、正しいgetElementsByClassName
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()を呼んでいます。