JavaScriptのDOM

JavaScriptからHTMLやCSSに干渉し、静的なページに動的な動作を持たせることができます。例として下の「背景色を変更」をクリックすると、背景色がランダムに変わります。

#sample{ border:solid 1px #000; margin:24px 0; } #sample button{ border: 2px solid #FFF; background-color:silver; border-radius: 4px; margin:4px; padding: 4px; display:block; } function chgcolor(){ var color = “#” + Math.floor(Math.random() * 0xFFFFFF).toString(16); document.getElementById(‘sample’).style.backgroundColor=color; }

このような処理には「DOM(Document Object Model)」という仕組みを使っています。 HTML文書をオブジェクトとして捉え、トップレベルの要素を「document」として要素やセレクタを指定して干渉するのです。

ソースはこのようになっています。

  function chgcolor(){
    var color = "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);
    document.getElementById('sample').style.backgroundColor=color;
  }


<div id="sample">
  <button>背景色の変更</button>
</div>

代表的なDOMAPIメソッドを以下にいくつか紹介します。これらメソッドを利用すれば本来静的であるHTML文書を書き換えて、まるで動的なページであるかのように動かせるのです。

メソッド	取得方法	利用できるノード
getElementById(id)	idを属性値に持つ要素の検索	document
getElementByTagName(tag)	タグ名「tag」の要素を検索	document、任意のエレメントノード
getElementByClassName(className)	classNameをclass属性地に含む要素を検索	document、任意のエレメントノード
getElementByName(name)	nameをname属性地に持つ要素すべて検索	document
querySelector(selector)	selectorｎｏCSSセレクタにマッチする要素の１つ目を検索	document、任意のエレメントノード
querySelectorAll(selector)	selectorｎｏCSSセレクタにマッチする要素全て検索	document、任意のエレメントノード
createElement(tag)	新たなエレメントノードを作る	document
appendChild(element)	elementを自身の子要素としてDOMツリーに加える	任意のエレメントノード

B!
LINE