DOMとオブジェクト指向

javascript・jQuery

「DOM」

HTML要素の情報を書き換えたり、削除したり、操作するための仕組みのこと

 

・HTMLは、ブラウザ上ではツリー状になっている（DOMツリー）

＞上から順番に読み込まれて表示される

・DOMツリー（階層）により、お互いの関係がわかるようになる。（「親と子」「兄弟」）

 

・javascriptはDOMを元にHTML/CSSを操作している

＞そのため、DOMが出来上がる前に操作するとエラーになる

＞操作する要素の下に書く

 

javascriptは、オブジェクト（DOM）を操作する言語

＜オブジェクト＞

・現実世界の考え方をプログラムの仕組みに取りれたもの

・「プロパティ（変数）」「メソッド（関数）」を持っている

 

オブジェクト：対象（物体）

プロパティ：対象の情報

メソッド：処理内容

---------------------

 例：現実世界⇨プログラム（PC）世界

 

犬 ⇨ オブジェクト

 

犬の情報 ⇨ オブジェクトの情報

犬種：マルチーズ ⇨ プロパティ

毛色：クリーム ⇨ プロパティ

体重：4kg ⇨ プロパティ

 

犬のアクション ⇨ オブジェクトの処理内容

食べる ⇨ メソッド1

吠える ⇨ メソッド2

舐める ⇨ メソッド3

---------------------

 

javascriptは「オブジェクト指向言語」とも呼ばれる

オブジェクト指向という考え方を元にしてオブジェクトを操作する言語

 

＜オブジェクトの種類＞

⑴Document

⇨htmlの要素を書き換える

⑵window

⇨画面を操作する

⑶location

⇨パスを操作する

⑷String

⇨文字列を操作する

 

＜オブジェクト操作方法＞

⑴メソッドを操作

⇨オブジェクト名.メソッド名（引数値）;

⑵プロパティを操作

⇨オブジェクト名,プロパティ名=値; 

 

documentオブジェクト操作方法

⇨querySelector(セレクター)

---------------------