【JavaScript】DOM（DocumentObjectModel）を試してみます【実験】

　どうも！LSSです！！

これまで、JavaScriptで画面を書き換えるのにもっぱらinnerHTMLを使用していました。

JavaScriptには他にDOMという方法があります。

Document Object Model の略で、HTMLドキュメント（ページ）をオブジェクト（モノ）として扱う、って事ですね。

テスト

ボタンを押すたび、スライダーが増えます（意味はありませんがｗ）

 コード

<div id="gamen"><input id="apbt" type="button" value="追加" /></div>
<script>// <![CDATA[
apbt.addEventListener('click',ap,false);
function ap(e){
ip=document.createElement('input');
ip.id='ip'+gamen.childNodes.length;
ip.type='range';
ip.value=gamen.childNodes.length;
gamen.appendChild(ip);
apbt.value='追加'+gamen.childNodes.length;
}

ちょっと作りたいものがあって

inputタグをつどつど追加していく際に、innerHTMLで全体を書き換える方法だと、すでに置いているinputのユーザーが書き換えた内容が維持されないかも？と思いました。

今回のこの方法だと、既に置いたスライダーを変更し、新しいものを追加しても元のスライダーの変更が維持されていますね^^

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^