【JavaScript】DOM編に入ってみた

ドットインストールでDOM編に入ってみた。以前にドットインストールでおみくじやストップウォッチを作成していた際に、わからない。。となっていた部分がやっているじゃないか。ここすっ飛ばして作成していたという事実を初めて知ったが、みんなが言ってるDOMってこのことね！とやっと繋がった。笑

◆DOM(Document object Model)・・・マークアップ言語で書かれたドキュメントにアクセスするための仕組み。

【要素ノードを取得する】
①get・・・特定の名前・属性をキーに取得

getElementById・・・指定されたidを持つ要素を取得。
getElementsByTagName・・・指定されたタグの要素を取得。
getElementsByName・・・指定されたname属性を持つ要素を取得。
getElementsByClassName・・・指定されたクラス名を持つ属性を取得。

◆getElementByIdが特定の単一要素を取得するのに対し、他３つは複数取得する可能性がある。（なので名前も複数形。記述する際は注意）単一の要素を取得するとわかっているならばgetElementById使用が自然。

②query・・・より複雑な条件での検索を可能にする。セレクター式で要素を検索。

querySelector・・・指定されたセレクタの最初の要素を操作する。
querySlectorAll・・・指定されたセレクタにマッチする全ての要素を返す。

◆セレクター式とはCSSで要素を指定する際と同じ。
（idだけでも検索できるし、#main > div 等細かく指定できる）

getメソッドとqueryメソッドの使い分けはというと、getElementメソッドは高速。より複雑な検索条件で検索したい場合以外はgetElementメソッドを使用した方が良いとの記述。

で、その速度の違いについては、getElementメソッドは動的Node、querySelectメソッドは静的Nodeを生成しているらしい。ここは深くなりそうなので、いつかの回に続く。

c.sakyou