DOMが分かるシンプルな例
オンライン販売所
Raspberry Pi　6,500円
TWELITE Red 3,000円
合計
これはよく見る例です。商品のチェックボックス操作により合計がかわります。小説など文章で勝負するサイトではお目に書かれない動きです。 この仕組みは、DOMとJavaScriptで実現しています。
次のようにidを定義します。

上記をHTMLで記述すると下記のようになります。

<input type="checkbox" id='id0' value="6500" onclick="myfunc()">Raspberry Pi　6,500円<br>
<input type="checkbox" id='id1' value="3000" onclick="myfunc()">TWELITE Red 3,000円<br>
<hr>
<span id="total">合計</span><br>
valueに金額をセットすれば、JavaScriptで金額を扱うことができます。
チェックボックスを操作するとmyfunc()で処理されます。 

 var myfunc = function () {
    var total = 0;
    for(var i = 0; i < 2; i++)
    {
    	var id = 'id' + i;
 //   	window.alert(id);

	    var elem = document.getElementById(id);
	    if(elem.checked == true)
	    {
	    	total += Number(elem.value);
	    }
    }
   	var el = document.getElementById("total");
	el.innerText = '合計　　　' + total + '円';
}
document.getElementById(id)でチェックボックスの要素を取得します。チェックされていたら合計にvalueで与えられる金額を合算します。 合計が終わったら、
document.getElementById("total"); で合計の要素を取得してテキストにセットします。

このようにDOMの基本は、以下の操作になります。

セレクタを付ける
 そのセレクタにidをつける
<span id="total">合計</span>

このidをJavaScriptで操作する。