JavaScript：DOMによる動的HTML操作

javascript

DOM（DocumentObjectModel)を勉強しだしたら結構面白かったので備忘録代わりに。

  • DOMの利点
  1. DOMを知っていればJavaScriptがかける
  2. DOMを知っていれば動的なHTMLがかける
  3. DOMを知っているとカッコよさげに見える

ってことで、DOMが面白いです。

既存のHTMLに上書き、追加したり、JavaScriptで新しくHTMLを作成したりとかなり使い勝手があります。

よく使ったメソッド



//document（HTML）中のタグ名がbodyであるすべての要素を返す

   var myBody=document.getElementsByTagName("body");

//BODYの子要素の0番目を取り出す

   var my=myItem.childNodes.item(0);

//タグを作成

   var a =　document.createElement('a');

//aタグの属性を設定

   a.setAttribute('href','http://shandygaff.net/mt/');

   a.setAttribute('target','blank');

//TextNodeを作成

   var aText = document.createTextNode("私のブログ");

//aの子要素としてTextNodeを追加

   a.appendChild(aText);

//parentElement(この場合はBody)の子要素としてリストの末尾に加える

   myBody.appendChild(a);


って感じで、DOMの親子関係を理解していれば、なんとなくコーディングできてしまうライトな感じがステキです。

  • *開発環境
  1. TeraPad
  2. Firefox+Firebug（Firebugサイコー！！）

ばんざいヽ(´ー｀)ノ