9.
DOMの基本 1
Documentとは
Documentオブジェクト
DocumentはHTML要素（Element）を操作するためのオブジェクトです。Webページのロード後にwindowオブジェクトの一部として生成され、window.documentまたはdocumentとしてアクセスできます。
DOM とは
DOM(Document Object Model) は、簡単にいうとHTMLのオブジェクトのことです。JavaScriptは、DOMを操作できる唯一の言語で、ブラウザ操作するアプリ開発には欠かせません。DOMはNodeを起点としたツリー状の集合になっています。
Node/
├── Document/
└── Element/
├── HTMLElement/
└── SVGElement/
Node
Nodeは、DOMツリーを操作するオブジェクトです。NodeにはDocument、Element、SVGElementといった種類があり、プロパティやメゾッドが定義されています。
Element
Elementは、Nodeの一部でWebページ内のHTMLタグを表すオブジェクトです。Elementオブジェクトは、その要素の属性や内容、スタイル、イベントなどにアクセスするためのプロパティやメソッドを提供します。
メソッドとプロパティ
Documentオブジェクトにはメソッドやプロパティといった、プログラムで利用するたくさんの機能が搭載されています。
主なメソッド
| メソッド | 処理 |
|---|---|
| close() | ドキュメントを閉じる |
| clear() | ドキュメントをクリア |
| open() | ドキュメントを開く |
| write() | ドキュメントに文字を出力 |
| getElementById() | ドキュメントからID指定で要素を選択 |
| getElementsByClassName() | ドキュメントからクラス指定で要素を選択 |
主なプロパティ
| プロパティ | 処理 |
|---|---|
| title | ドキュメントのtタイトルを取得・設定 |
| location.href | 現在のページのURL取得 |
| domain | 現在のページのドメイン取得 |
| bgColor | ドキュメントの背景色の取得・設定 |
| forms[] | ドキュメントのform |
| links[] | ドキュメントのリンク |
| images[] | ドキュメントの画像 |
Documentのメソッド
document.write()
write() は、ブラウザに文字列を出力するメソッドです。
document.write(値)
HTMLタグの出力
write() でHTMLタグを指定すれば、ブラウザでHTML表示することができます。
document.write("<h1>タイトル</h1>")
- write() は、セキュリティの問題で現在は非推奨の機能です
- HTMLの操作は、通常DOMオブジェクトで操作します
ファイル構成
basic/
├── js/
│ └── dom1.js
└── dom1.html
Documentの表示
「dom1.html」を作成し、「dom1.js」を読み込みます。
dom1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/dom1.js"></script>
</body>
</html>
JSでHTML出力
「dom1.js」にHTMLタグを出力します。
js/dom1.js
...
document.write('<h1>プロフィール</h1>')
document.write('<h2>名前</h2>')
document.write('<p>東京 太郎</p>')
結果
外部ファイルで出力
outputP() を定義してHTMLタグを出力します。メソッドには引数も用意します。
const outputP = function(message)
{
var tag = "<p>" + message + "</p>"
document.write(tag)
}
outputP('旅行')
outputP('ゲーム')
outputP('スポーツ観戦')
結果
pタグがブラウザに表示されました。
Documentのプロパティ
Documentオブジェクトのプロパティを使って、ブラウザのHTMLを操作してみましょう。
titleプロパティ
titleプロパティは、HTMLのタイトルを文字列で設定します。
document.title = "文字列"
HTMLのタイトルを変更
titleプロパティにの文字列を設定します。
document.title = "プロフィール"
styleプロパティ
styleプロパティで、HTMLのスタイルを設定します。例えば、bodyタグにスタイルを設定するにはbody.styleで設定します。
document.body.style.プロパティ = 値
文字色と背景色の変更
bodyタグの文字色と背景色を設定してみます。
document.body.style.color = "#808080"
document.body.style.background = "#fffaf0"
結果
ドキュメント全体の文字色と背景色が変更できました。
演習
問題1
「document.write()」 を使って、「images」フォルダに配置された画像を出力してみましょう。
ファイル構成
./
├── images
│ └── tokyo_station.jpg
├── js
│ └── dom1.js
└── dom1.html