getElementsByClassName()

現在時刻

getElementsByClassName()を使った時刻表示の例です。表示は、

 <p class="yymmdd">現在時刻</p>

で定義しています。
次にJavaScriptは、

<BODY onLoad="init()" >

で初期化の関数init()を呼び出します。init()ではタイマーを起動します。

function init() {
    window.setInterval(timerTask, 1000);
}

timerTask()は1秒ごとに呼び出されます。日時と時刻を取得して分と秒は２桁の0詰め(例：05秒)で表示します。

function timerTask(){
    var tm = new Date();
    var elm = document.getElementsByClassName('yymmdd');
    //0詰めにする
    var h = tm.getHours();
    var m = ("00" + tm.getMinutes()).slice(-2);
    var s = ("00" + tm.getSeconds()).slice(-2);
    elms[0].innerHTML = h + ":" + m + ":" + s; 
}

これで時刻表示ができました。
getElementById()
と
getElementsByClassName(）
は同じように思えますが、全然違います。
よーーーーく見ると、
getElementsByClassName（）
sが付いています。意味するところは複数です。取得したデータもelms[0]となっていて複数データを配列で取得します。