javascript - テキストを画像に置き換える - 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

この行は問題です:

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

document.getElementsByClassである必要があり、プロパティを持たない をdocument.getElementsByClassName返します。をループして、各要素の を確認します。NodeListinnerHTMLNodeListinnerHTML

このようなもの（ライブの例）：

<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. 上記の実際の例では提供されていません。Firefox、Chrome、または Opera を使用してください。(「getElementsByClassName for IE」を検索するだけで、いくつかの実装から選択できます。)
• 上記のscriptタグは、HTML ファイルで処理するすべての要素の後に配置する必要があります。

Answer 2

そうあるべきです（例）

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

Answer 3

• class="attr attr-value" そしてあなたが呼んでいる
  document.getElementsByClass('attr-value').innerHTML

• document.getElementsByClassName();