TECH EXPERT 25日目　JavaScript　HTMLの取得　オブジェクトの生成とブラウザ上のwebページの見た目を変化

Webページの見た目を変化させたい

JavaScriptにおけるオブジェクトとは：データや機能をまとめた情報そのもの。

配列は順番でデータを管理しますが、JavaScriptのオブジェクトは名前と値をセットにしてデータを管理します。

生成方法：let human = {}　　　＃波かっこを使う

使わなかったらデータがとっちらかる。

ハッシュとディレクトリの考えに近い

オブジェクトのなかにオブジェクトをいいれることも可能。

プロパティ：オブジェクトが持つ属性を表します。人オブジェクトであれば、名前や年齢などの属性が存在。

例
let human = { name: 'yamada' };　＃オブジェクトの作成（プロパティ名と値を定義）

console.log(human.name);　　＃値の取得は　オブジェクト名.プロパティ名　と記述

/ => yamada

※変数humanはnameプロパティを持つ。プロパティは必ず属性名である"プロパティ名"とデータである"値"をセットで持つ。

したがって、nameはプロパティ名、'yamada'は対応する値となる。

プロパティの追加

下のどっちでも可能

human.age = 25　　　　　　オブジェクト.プロパティ=値を代入する

human['address'] = 'Tokyo'　　オブジェクト['プロパティ']=値を代入する

プロパティの値の変更

human.name = "yabe"　　オブジェクト.プロパティ=変更する値　

JavaScriptはブラウザで働くプログラミング言語だったよね

其の為初めから備わってる、ブラウザを操作するオブジェクトの最高位　windowオブジェクト

JavaScriptで予め定義されている関数やオブジェクトは全てwindowオブジェクトのプロパティだったのだ。

JavaScript側であらかじめ用意されているwindowオブジェクトを用いることで、JavaScriptからブラウザに影響を及ぼすことができる

その中のwindowオブジェクトめっちゃ使うやつ

documentオブジェクト
ブラウザ上で表示された情報(HTML文章)を操作する事ができるオブジェクト

事前知識として

DOM：　Document Object Model(ドキュメントオブジェクトモデル)の略。HTMLを解析し、データを作成する仕組み。

解析されたHTMLは階層構造のあるデータになり、DOMツリーという。

JavaScriptの関数を使うと、DOMツリーを操作することができる感じ

1. ID名から取得する方法　　document.getElementById("id名");

2. クラス名から取得する方法　document.getElementsByClassName("class名");
3. セレクタ名から取得する方法　document.querySelectorAll("セレクタ名");