要素を-50px移動させたい

Question

###前提・実現したいこと
下記のソースは、要素(span)がクリックされたらsetIntervalメソッドで0.1秒ごとにX軸上で-50px移動するよう記述したものです。
ここで疑問なのですが、コンソール画面を見ると「未定義またはnull参照のプロパティtransformは設定できません」と表示されます。
どう修正するとこの表示は、消えるのでしょうか。

###発生している問題・エラーメッセージ
http://up2.cache.kouploader.jp/koups17146.png

###該当のソースコード

<div id="o_slider">
<ul>
<li class="selected"><span>＜</span>画面１<span>＞</span></li>
<ul>
</div>

//<がクリックされたら
$('#o_slider .selected span:nth-child(1)').on('click', function() {
    var elem = document.getElementsByClassName("selected");
	setInterval(function() {
		//liが-50px動く
		elem.style.transform = "translateX(-50px)";
		
		},100);
});

###補足情報(言語/FW/ツール等のバージョンなど)
dreamwevercs6

Answer 1

document.getElementsByClassNameで取得できる値は、要素への参照を格納した配列です。
配列へは直接transformというメソッドを使う事はできません。
使えないメソッドを使おうとしている為に、質問のエラーはでています。

例えば下記の様なHTMLであれば……

<div class="selected">1</div>
<div class="selected">2</div>
<div class="selected">3</div>
<div class="selected">4</div>

それぞれの結果は以下の様になります。

var elem = document.getElementsByClassName("selected");

elem.style.transform = "translateX(-50px)"; //エラー

elem[0].style.transform = "translateX(-50px)"; //1のdivが動きます
elem[1].style.transform = "translateX(-50px)"; //2のdivが動きます
elem[2].style.transform = "translateX(-50px)"; //3のdivが動きます
elem[3].style.transform = "translateX(-50px)"; //4のdivが動きます

似た使い方をするdocument.getElementByIdでは、
配列ではなく要素そのものを取得するので、混乱するかもしれませんね。

HTMLには同じIDは1つまでという決まりがあるのですが、
Classにはその様な決まりが無く、いくつでも設定できるのでこの様な仕様なのでしょう。

Answer 2

「document.getElementsByClassName」の結果は同じクラス名が指定されている要素の配列です。
配列に「transform」というメソッドはないので、「未定義またはnull参照のプロパティ」と返されるのです。

var elem = document.getElementsByClassName("selected")[0];

やるならこうゆーふーに。