JavaScriptのdocumentオブジェクトとは?
JavaScriptのdocumentオブジェクトに関わる知識をまとめていきます。
documentオブジェクトとは
ブラウザで表示された情報(HTML)を操作することができる「オブジェクト」です。HTMLに対して何かしらの処理をする際に頻繁に利用します。
JavaScriptのオブジェクトとは
JavaScriptのオブジェクトとは「データ」や「処理」をひとまとめにした「集合体」です。例えば「採取される」、「食べられる」といった処理が行われる「りんご」は、「果物」として1括りにまとめることができます。この果物がオブジェクトになります。
オブジェクト内のデータとは
「果物」の中でも、「りんご」や「バナナ」といったものは「データ」です。またデータは「キー」と「バリュー」がセットになったものを指し、これを「プロパティ」と言います。りんごというデータで例えるなら、「色が赤い」、「形が丸い」といった特徴の部分が「プロパティ」です。そして「色」や「形」が「キー」であり、「赤い」や「丸い」といった部分が「バリュー」になります。
オブジェクト内の処理とは
「果物」の中でも「採取される」、「食べられる」といったことは「処理」です。オブジェクトが「車」の場合は、「走行する」、「止まる」といったことも処理です。こういったプロパティに紐付けられた処理のことを「メソッド」と言います。このメソッドの操作は、functionといった関数を用いることで実現できます。
JavaScriptとは
ブラウザで動くプログラミング言語です。
JavaScriptで定義済みのオブジェクト
JavaScriptにはあらかじめ「windowオブジェクト」をはじめとしたオブジェクトが定義されています。このwindowオブジェクトの「プロパティ」の中に「consoleオブジェクト」や「documentオブジェクト」があります。
DOM(Document Object Model)とは
単なる文字情報である、HTMLをユーザーが閲覧できる状態にするまでの「仕組み」です。この作業はGoogle ChromeやSafariといったブラウザが行います。ブラウザ内でHTMLが解析されてDOMに変換されたのち、JavaScriptやCSSが読み込まれて、ユーザーが閲覧できる状態になります。
DOMツリー(ドキュメントツリー)とは
「階層構造になったデータ」です。これはDOMによって解析されたHTMLのことです。<body>の中に<header>があるといった入れ子構造が、わかりやすく整理された状態になることです。
document.getElementById("id名")のようなJavaScriptのメソッドは、このDOMツリー状態になったHTMLを操作するメソッドです。
