Javascript基本②

##ボタンをJavaScript上で扱えるようにする
ボタンを押したらコンソール上で「Hello world」と出す実装をしていきます！
DOMという仕組みを利用します。

##DOMとは
HTMLを解析して、データを作成する仕組みです。
DOMによって解析されたHTMLは階層構造のあるデータです。
これを、DOMツリーもしくはドキュメントツリーと呼びます。

JavaScriptを使うと、DOMツリーを操作することができます！
idやclassの情報を元に、DOMツリーの一部を取得して要素を増やしたり消したりします。
このDOMツリーの一部のことをノードオブジェクトと呼びます。

ノードとは

DOMツリーを構成する要素をノードと呼びます。　
body →　ノード
header →　ノード
side_bar　→　ノード
footer →　ノード

##DOMツリーの情報
DOMツリーの情報は検証ツールで見れます。

##ノードの取得

1.document.getElementById("id名");
documentは開いているページのDOMツリーが入っているオブジェクト。
ドキュメントに対していくつかのメソッドを使用することで、DOMツリーに含まれる要素を抽出して取得することができます。DOMツリーから特定の要素を取得するためのメソッドの一つです。

2.document.getElementsByClassName("class名");
classを指定して取得する場合は上記です。"Elements"と複数形にして利用します。
同じclassを持つ要素を全て取得することができます！

3.document.querySelector("セレクタ名");
セレクタ名とは、CSSでスタイルを適用するために指定している要素。
HTML上から、引数で指定したセレクタに合致するもののうち一番最初に見つかった要素1つを取得

##コンソールでボタン要素を取得

document.querySelector("button");
戻り値は<button id="Button">ボタン</button>
HTMLタグのようなものがノードです。

##querySelectorメソッド　複雑なセレクタ指定

idがbutton２のbuttonタグの要素

docuent.querySelector("button#Button2"); 

footerタグ要素の中の、クラスがnextのaタグ要素

document.querySelector("footer a.next");

上記でquerySelectorメソッドを使って、ボタンをJavaScript上で取得することができます。

querySelectorメソッドでは、複雑なセレクタも指定できます。

#####今回は以上です！