DOM

javascript

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

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

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

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

<div id="sample">
  <button onclick="chgcolor()">背景色の変更</button>
</div>

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

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

アマルウェブ HOME