ホーム HTML CSS XML JAVASCRIPT   PHP SQL MORE...   リファレンス 事例集    

DHTML - HTML DOM


HTML DOMとは ?

HTML DOM は、次の通りです:

  • HTMLのドキュメントオブジェクトモデル
  • HTMLの標準プログラミング·インタフェース
  • プラットフォームや言語に依存しない
  • W3C標準

HTML DOMは、全 HTML 要素のオブジェクトとプロパティと、 それにアクセスするためのメソッド(インターフェイス)を定義します。

言い換えれば、HTML DOMは、HTML 要素の取得、変更、追加、削除方法の標準規格です


HTML 要素の変更

次の例は、h1 要素のコンテンツを変更します

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script type="text/javascript">
document.getElementById("header").innerHTML="New Header";
</script>

</body>
</html>

Try it yourself »

例の説明

  • 上記の HTML 文書には、id="header" である h1 要素が存在する
  • id="header" を持つ要素を取得するために HTML DOM を使用する
  • JavaScriptは、その要素のコンテンツ(innerHTML)を変更する

HTML 属性の変更

次の例では、img 要素の src 属性を変更します:

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script type="text/javascript">
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

Try it yourself »

例の説明:

  • 上記の HTML 文書には、id="image" である img 要素が存在する
  • id="image" を持つ要素を取得するために HTML DOM を使用する
  • JavaScriptは、要素の src 属性を "smiley.gif" から "landscape.jpg" に変更する

HTML DOM チュートリアル

HTML DOM の詳細については、完全な HTML DOM チュートリアルをお読みください。