JavaScriptのDOM

JavaScript

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)selectornoCSSセレクタにマッチする要素の1つ目を検索document、任意のエレメントノード
querySelectorAll(selector)selectornoCSSセレクタにマッチする要素全て検索document、任意のエレメントノード
createElement(tag)新たなエレメントノードを作るdocument
appendChild(element)elementを自身の子要素としてDOMツリーに加える任意のエレメントノード
eyecatch

画像ポップアップとスワイプ可能なプラグイン「baguetteBox.js」

eyecatch

JavaScriptの正規表現

JavaScriptの記事

eyecatch

JavaScriptの条件分岐

eyecatch

jQueryライブラリを読み込む

eyecatch

JavaScriptの変数と命名規約

eyecatch

JavaScriptの繰り返し処理

eyecatch

JavaScriptの配列

eyecatch

JavaScriptの演算と演算子

JavaScriptの記事一覧HOME