JavaScriptで、オブジェクトの生成と、ブラウザ上のWebページの情報を取得する方法

・JavaScriptにおけるオブジェクトの概念

Rubyでは、生成するすべての値やクラスがオブジェクト。
JavaScriptにおけるオブジェクトは、Rubyにおけるハッシュのような構造をとるもの。

・（JavaScriptにおける）オブジェクト
データや機能をまとめた情報そのもの。名前と値をセットにしてデータを管理する。このセットをプロパティと言う。

・プロパティ
そのオブジェクトが持つ属性を表す。プロパティは必ず属性名である"プロパティ名"と、データである"値"をセットで持つ。

let human = { name: 'yamada' }          # nameはプロパティ名、'yamada'は対応する値

プロパティの値を取得したい場合は、オブジェクト名.プロパティ名のように記述する。

let human = { name: 'yamada' }

console.log(human.name)      # オブジェクト名.プロパティ名

# 出力結果
yamada

オブジェクトにプロパティを追加するには、

・オブジェクト.プロパティに値を代入する
・オブジェクト['プロパティ']に値を代入する

let human = { name: 'yamada' }
console.log(human)

human.age = 25                    # オブジェクト.プロパティに値を代入
human['address'] = 'Tokyo'        # オブジェクト['プロパティ']に値を代入

console.log(human)


# 出力結果
yamada
{name: "yamada", age: 25, address: "TOKYO"}

プロパティの値を変更するには、
オブジェクト名.プロパティ = 変更したい値　と記述することで、プロパティの値を変更できる。

let human = {
  name: "yamada",
  age: 25,
  address: 'Tokyo'
}
console.log(human.name)
human.name = "yabe"           # yabeに上書き
console.log(human.name)

# 出力結果
yamada
yabe

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・オブジェクトのメソッドの操作
JavaScriptのオブジェクトには機能を定義することができる。

let human = {
 name: "yamada",
 age: 25,
 address: 'Tokyo',

 talk: function(){
   console.log(`私の名前は${human.name}、${human.age}歳です。住所は${human.address}です`)
 }
}

human.talk()

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

JavaScriptにはあらかじめ、ブラウザを操作するメソッドを持つオブジェクトが定義されている。その最上位であるオブジェクトがwindowオブジェクト。

最上位のwindowオブジェクトを起点として、下位にその他のオブジェクトが属する構造となる。
ブラウザが起動するタイミングで自動的に生成され、JavaScriptからアクセスできる。

windowオブジェクトの中でも、もっとも頻繁に使う可能性のあるdocumentオブジェクトを紹介します。

・documentオブジェクト

ブラウザ上で表示された情報(HTML)を操作する事ができるオブジェクト。
windowオブジェクトの中でも、もっとも頻繁に使う可能性のあるオブジェクト。

documentオブジェクトは数多くのプロパティやメソッドを持つため、HTMLに対して何か処理をする際は頻繁に使用するオブジェクト。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・alertメソッド

開いているブラウザにアラートを表示させる処理。windowオブジェクトに定義されているメソッド。

window.alert("ブラウザオブジェクトの取得に成功！")

windowの記述は省略することができる。

alert("ブラウザオブジェクトの取得に成功！")

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・documentオブジェクトを用いて、HTMLの要素をJavaScript上で取得し操作する方法

・DOM

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

・HTMLがWebページとして閲覧されるまでの流れ

HTMLで書かれたファイルは単なる文字情報。HTMLを解析し、CSSやJavaScriptによる装飾を行ってから、画面に映すという工程を経て一般的なWebページは表示される。これを行っているのが、Google ChromeやSafariといったブラウザ。

HTMLは階層構造になっており、DOMによって解析されたHTMLは、階層構造のあるデータとなる。
・・・DOMツリーやドキュメントツリーと呼ぶ。JavaScriptのメソッドを使うと、DOMツリーを操作することができる。

DOMツリーからHTMLを取得する方法
・id名から取得する方法
＞＞＞document.getElementById("id名")

・class名から取得する方法
＞＞＞document.getElementsByClassName("class名")

・セレクタ名から取得する方法
＞＞＞document.querySelectorAll("セレクタ名")

・document.getElementById("id名")
DOMツリーから特定のHTMLの要素を取得するためのメソッド。引数に渡したidを持つHTMLの要素を取得する。

document.getElementById("id名")

・document.getElementsByClassName("class名")
同じclassを持つ要素を全て取得するためのメソッド。getElementsと、複数形になる。

document.getElementsByClassName("class名")

・document.querySelectorAll("セレクタ名")
HTML上から、引数で指定したセレクタに合致するものをすべて取得するためのメソッド。
セレクタ名・・・CSSでスタイルを適用するために指定している要素。

document.querySelectorAll("セレクタ名")

最も頻繁に使用するセレクタ名・・・class名、id名、HTMLタグ
＞＞＞class名：(".class名")       <<<"."（ドット）に注意
＞＞＞id名：("#id名")
＞＞＞HTMLタグ：("タグ名")

getElementsByClassNameはHTMLCollectionというオブジェクトを、querySelectorAllはNodeListというオブジェクトを戻り値として返す。

# 取得するHTMLの情報

<ul class="hidden" id="modal">
 <li class="modal-list">リスト1</li>
 <li class="modal-list">リスト2</li>
 <li class="modal-list">リスト3</li>
 <li class="modal-list">リスト4</li>
</ul>



# コンソール上

console.log(document.getElementsByClassName("modal-list"))
# 出力結果 => HTMLCollection(4) [li.modal-list, li.modal-list, li.modal-list, li.modal-list]

console.log(document.querySelectorAll(".modal-list"))
# 出力結果 => NodeList(4) [li.modal-list, li.modal-list, li.modal-list, li.modal-list]

2020/11/12