DOMとは

Document Object Modelの略。オブジェクトを操作する。
Document・・・今開いているページ
Object・・・windowとかdocumentとかImageとか
HTMLの要素(pとかimgとかタグだけでなくidやnameなども含む)に対してアクセス(get、create)し処理する。
DOMはJavaScriptからHTMLを使う仕組み。

JavaScriptのオブジェクト階層構造

[使い方]

  1. HTMLのタグ要素内にidを設置する
  2. idをget関数でアクセスして変数に代入する
  3. その変数に対して命令する

get関数
getElementById(""); 指定したidにアクセスする
getElementsByTagName(""); 指定したタグ(pとかimgとか)にアクセスする
getElementsByName(""); 指定したnameにアクセスする

「getElement(s)By~('')」の('')とは場所を指す。('')にアクセスして取り出したり、出力したりする。
getだが「取得」という意味ではなくアクセスの意味である。「取得する」か「出力する」かはメソッドで決める。


create関数
createElement(""); タグ(pとかimgとか)を生成する
createTextNode(""); テキストを生成する

<p id="msg">Hello!!</p> // ①idを設置

<script>
<!--

	var e = document.getElementById('msg'); // ②id=msgにアクセスし変数に代入

	e.textContent = 'こんにちは!!'; // ③変数にプレーンテキストを出力 

	若しくは
	
	document.getElementById('msg').textContent = 'こんにちは!'; // id=msgにアクセスしプレーンテキストを出力
	
//-->
</script>

[実行結果]

Hello!!

インデックスに戻る