20.DOM操作とは ～JavaScriptでHTMLを自由に操作～
DOMとは
DOMとはDocument Object Modelの略で、文書を操作する為の取り決め。
JavaScript(プログラム)でHTMLを参照したり、操作したりする為の仕組みと言えます。
ようやく、「JavaScriptでwebサイトに動きをつける」と「今までの基本学習」が繋がった感じがしています。
実際のテストは、ブラウザ上で簡単なHTML/CSS/JavaScriptを書いて実行できる「JSFiddle」というサービスを使います。
それではDOM操作について整理していきます。
HTML文書を操作する
例えば、JavaScriptに
document.getElementById('service-title').outerHTML
と書くと、対象の要素とその子要素のHTMLを取得できます。
いきなり「何を言っているのかわからない」となりますが、
分解して１つずつ確認していきましょう。
documentの部分はオブジェクトのような物。「インターフェース」と言うらしいです。
インターフェースは概念的に共通した部品と機能の集まりなんて表現されていますね。
とはいえ、わかりにくいので、
抽象的で便利なオブジェクトぐらいの捉え方でまずは進めていきます。
そして、documentはブラウザに読み込まれたwebページを表している…
つまり、オブジェクトにブラウザで読み込んだHTMLファイルを代入していると捉えることができます。
documentがオブジェクトだとすれば、その後に続く
.getElementById(引数)
の部分は関数ということになります。
オブジェクトには関数も定義できます。
内部の記述は詳しくわかりませんが、やっていることは
「HTMLタグのIdが引数と合致する要素を取得する」
ですね。
そして、その後続いているのは
.outerHTMLというキー(プロパティ)です。
これは要素の持つキー(プロパティ)で、HTMLを格納していると考えられます。
document.getElementById('service-title').outerHTML
というのは結局のところ
ブラウザに読み込まれたHTMLファイルの中で、Idが「service-title」の要素のHTMLを取得するという意味だったわけです。
いきなり、document.getElementById('service-title').outerHTML
これだけ書かれると意味不明です。
ですが、昨日まで学習していた基本と１つずつ
照らし合わせながら確認していくと、
そう難しいことでもないのがわかります。
HTML要素を指定して取得
getElement～関数が複数用意されているようで、
- getElementById(Id名)
- getElementsByClassName(クラス名)
- getElementsByTagName(タグ名)
2と3に関しては要素が配列で取得されます。
１はHTMLタグのId属性の名前が一致する要素をオブジェクトとして取得する。
2はHTMLタグのクラス属性の名前が一致する複数の要素をオブジェクトの配列として取得する。
３はHTMLタグのタグ名を指定して一致する複数の要素をオブジェクトの配列として取得する。
今日のまとめ
- DOMはJavaScriptでHTMLを参照、操作する為の仕組み
- documentはブラウザから読み込まれたwebページを表す
- 読み込まれたwebページから要素を取得するには各種関数を使う
この後も引き続き、DOM操作について学んでいきたいと思います。
基本文法を学んできたことで、１つずつ読み解くことができました。
やはり基本は大事ですね。
では、また。
