勉強備忘録：ドットインストール詳解JavaScriptDOM編

１．DOMとは？

・DocumentObjectModelの略
・HTML のように文書の構造をメモリ内に表現することで、
　ウェブページとスクリプトやプログラミング言語を接続するもの。
　文書を論理的なツリーで表現。

２．要素を操作するメソッド

２－１．取得

・querySelecter('セレクター')→（）のセレクターの要素を取得。
　複数ある場合は、最初の要素を取得。
・querySelecter('#ID名')→IDの要素を取得→getElementById('ID')
・querySelecterAll('セレクター')→複数の（）のセレクター要素を取得。
　戻り値は、要素の配列。取得結果は、forEachなどが使える。
・getElementsByTagName(要素名)
・getElementByClassName（クラス名）
・階層関係を使って取得も可能(必要に応じてググる)

２－２．追加

・createElement(要素名)→要素を作成する。
・appendChild(要素)子供として、要素の最後に追加する。
　appendしてはじめて、DOMツリーに追加され、ブラウザに反映される。
・cloneNode()→要素を複製。trueを指定すると、中身もコピーされる。
・insertBefore(挿入する対象,挿入する場所)→要素を挿入

２－３．イベント

・addEventListener('イベント',()=>{処理})
　要素にイベントが追加されたら{処理}を行う。
・イベントの種類は、clickだけでなく、dbclickや、mousemoveなど多岐。
・イベントオブジェクトを扱うときは、アロー関数に引数を設定する。
　addEventListener('イベント',(e)=>{処理})
　mousemoveイベント　e.clientx e.clienty x,y座標
　keydown イベント　e.key押したキー（shift,Altも）
　focusイベント　当たった時のイベント
　blurイベント　外れた時のイベント
　inputイベント　内容が更新されたとき
　valueプロパティ.lengthで、入力文字数をリアルタイムに取得可能
　changeイベント　更新が確定されたとき
　sibmitイベント　formタグ内のボタン押下時に、発生する。
　ページがすぐにリロードされるので、それを止めるには、preventDefalt()
　formタグで囲うと、ボタン押さなくてもEnterキーのみで送信可能。
　inputが1つの場合は、ボタンがなくても、Enterキーのみで送信可能。

２－４．削除

・remove() 一部の古いブラウザでは使えない
・親Node.removeChild(削除するNode)

３．要素の属性

・DOMでは、html属性と同じプロパティが用意されている。
　間に-が入るbackground-colorなどは、backGroundColorになるので、
　注意が必要。style属性の操作は、javascriptでも可能ではるが、基本CSS。
・classList→要素に紐づく複数のクラスを管理できる。
　contains（含まれているか調べる）,add（追加する）,remove(削除する),
　toggle（なければ追加、あれば削除）
・classNameでは、一つのクラスしか管理できないため、classListが便利。

４．カスタムデータ属性

・data-〇〇　→dataset.〇〇でアクセス可能

５．input要素の操作

・入力値→input要素のvalue属性で取得可能
・fonus()→フォーカスさせる
・selectbox→valueで選択された値
　htmlのvalue属性にタグの中身と別の名前を付けることも可能
・ラジオボタン→queryselecterAllですべてのinput要素を取得する。
　foreachで、選択された値を代入する変数に代入する。
・チェックボックス→queryselecterAllですべてのinput要素を取得する。
　foreachで、選択された値を代入する配列に代入する。
　（複数の値が選択されるため）

６．イベントの伝播

・親要素にイベントを追加して、子供をクリックして、
　処理を行うことも可能。
　イベント追加した要素（親要素）　e.currenttarget
　クリックした要素（子要素）e.target

７．その他

・Shift+Alt+F→コード整形