getElementById
getElementById・・・
getElementById メソッドは、要素の id 属性の値を指定して一致する Element オブジェクトを取得するものです。
その前にDOMについて簡単に説明します。
「Document Object Model」の略で、Webページ全体のコンテンツをオブジェクトとして表現します。
ウェブページとJavaScriptを接続し、言ってしまえばJavaScriptで扱えるオブジェクトの集まりとなります。
DOMは、枝分かれした木の性質のような階層構造（ツリー構造）を持っています。
HTMLのドキュメントがあります。
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>段落</p>
</body>
</html>
DOMは階層構造で表します。<html>や<body>、<h1>などすべてのHTMLタグはオブジェクトです。
document
└── html
├── head
│ └── title
│ └── #text タイトル
└── body
├── h1
│ └── #text 見出し
└─── p
└── #text 段落
DocumentオブジェクトがDOMの世界へのエントリーポイントとなっています。
ウェブページのあらゆるコンテンツを表して便利なプロパティやメソッドも用意されています。
では早速getElementByIdについて見ていきましょう。
getElementById メソッドは id 属性の値を指定して要素ノードを取得します。
構文 : document.getElementById(id)
ここで架空のウェブサイトのコンソールを見てみます。
document.getElementById('banner')でJava Scriptのオブジェクトを出力しています。
そして変数にいれ、見やすくし、console.dir(banner)でオブジェクトとして表示させます。
「img#banner」の矢印を押すと、たくさんのプロパティが現れます。
実際にWikipediaのサイトを使って確認してみるのも面白いと思います。
document.getElementByIdを使うことは多いと思うので頭に入れておきましょう。
MDNも参考にしてください。
