DOMとは
DOM(Document Object Model)は、HTML/XMLなどのマークアップ言語で書かれたドキュメントにアクセスするための標準的なしくみで、JavaScriptに限らず、現在よく利用されている言語のほとんどがサポートしている（言語によって細かな記法は異なる）。
基本知識
- 要素ノードの取得
- イベントドリブンモデル
上の二つは開発を進めるうえで欠かせない知識となる。書き方は変わっても考え方は同じ。以下でその方法をまとめる。
要素ノードの取得
getElementByIdメソッド
document.getElementById(id)
id値をキーに要素を取得。
querySelector(selector)メソッド
document.querySelector(selector)
selector式で要素を取得。
selector式とは
もともとはCSSで利用されていた記法で、スタイルを適用する対象を特定するための仕組み。
以下のような指定の仕方がある。
| 構文 | 概要 |
|---|---|
| * | すべての要素を取得 |
| #id | 指定したIDの要素を取得 |
| .class | 指定したクラス名の要素を取得 |
| element | 指定したタグ名の要素を取得 |
| selector1, selector2, selectorX | いずれかのセレクターに合致する要素をすべて取得 |
| aligned | aligned |
イベントドリブンモデル
- ボタンがクリックされた。
- マウスポインターが文字列の上に乗った（外れた）。
- テキストボックスの内容が変更された。
ブラウザ上でなどのイベントが起きた時にイベントに応じて実行するコードを記述できる。このプログラミングモデルのことをイベントドリブンモデルという。
addEventListnerメソッド
elem.addEventListener(type, listener, opts)
// elem → 要素オブジェクト
// type → イベントの種類
// listener → イベントの発生時に実行するコード
// opts → イベントオプション（falseが標準）
これを用いることで、イベントが起きた時に画像を表示したり、文字の色を変えたり、様々なことができる。
まとめ
DOMを勉強することによってプログラミングの景色が変わってきたようで楽しい。これからも学びを深めていきたい。