2014-11-08 - matsunamima’s diary

DOMとは

DOM（Document Object Model）とは、HTML文書をオブジェクトとして読み込んで操作するための仕組み
Documentオブジェクトが持つ要素の構造そのもの、あるいはそれらにアクセスしたり操作したりする機能のこと
DOMは、ドキュメントをツリー構造で扱います

Web標準のメリットを活かす

HTML：文書構造、意味を定義
CSS：レイアウト、見た目を設定
JavaScript：動作、振る舞いを追加

JavaScriptの文法

命令文の最後は「セミコロン」をつける

命令文１;
命令文２;

複数の命令文を１行に記述することもできます

命令文１;  命令文２;

引数は命令に渡すパラメータです

命令の名前（引数）;

要素名で要素を取得する

HTML文書の要素をデータとして取得するには、documentオブジェクトにあらかじめ用意されている「getElementsByTagName()」メソッドを使います

　document.getElementsByTagName('取得したい要素名')

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>プログラム実行テスト</title>
</head>
<body>
<h1>プログラム実行テスト</h1>
<p>第1段落</p>
<p>第2段落</p>
<p>第3段落</p>
<script>
var ps = document.getElementsByTagName('p');
alert(ps[0]);
//ダイアログボックスには「[object HTMLParagraphElement]」と表示されます。
</script>
</body>
</html>

プロパティ名	内容
innerHTML	要素の内容（テキスト）
id	id属性の値
title	title属性の値
lang	lang属性の値
dir	dir属性の値
className	class属性の値

要素の内容を取得する

要素の内容をデータとして取得するには、innerHTMLプロパティを使います

　オブジェクト名 . innerHTML

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>プログラム実行テスト</title>
</head>
<body>
<h1>プログラム実行テスト</h1>
<p>第1段落</p>
<p>第2段落</p>
<p>第3段落</p>
<script>
var ps = document.getElementsByTagName('p');
alert(ps[0].innerHTML);
</script>
</body>
</html>

ps[0]にオブジェクトとして代入されているp要素の内容を取得して、警告ダイアログボックスに表示する

要素の内容を変更する

innerHTMLプロパティで取得した要素の内容を変更する

　オブジェクト名 . innerHTML = '文字列';

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>プログラム実行テスト</title>
</head>
<body>
<h1>プログラム実行テスト</h1>
<p>第1段落</p>
<p>第2段落</p>
<p>第3段落</p>
<script>
var ps = document.getElementsByTagName('p');

//p要素の内容を変更する
ps[0].innerHTML = ' パラグラフ No.1';

</script>
</body>
</html>

文字列を追加

要素の上書きをせずに、元の内容に文字列を付け加える

<script>
var ps = document.getElementsByTagName('p');
//p要素の内容に文字列を追加する
ps[0].innerHTML = ps[0].innerHTML + '<b>（New！）</b>';
</script>

DOMとは、スクリプトでHTML要素を自由に操作するための仕組みである