勉強備忘録:ドットインストール詳解JavaScriptDOM編
1.DOMとは?
・DocumentObjectModelの略
・HTML のように文書の構造をメモリ内に表現することで、
ウェブページとスクリプトやプログラミング言語を接続するもの。
文書を論理的なツリーで表現。
2.要素を操作するメソッド
2-1.取得
・querySelecter('セレクター')→()のセレクターの要素を取得。
複数ある場合は、最初の要素を取得。
・querySelecter('#ID名')→IDの要素を取得→getElementById('ID')
・querySelecterAll('セレクター')→複数の()のセレクター要素を取得。
戻り値は、要素の配列。取得結果は、forEachなどが使える。
・getElementsByTagName(要素名)
・getElementByClassName(クラス名)
・階層関係を使って取得も可能(必要に応じてググる)
2-2.追加
・createElement(要素名)→要素を作成する。
・appendChild(要素)子供として、要素の最後に追加する。
appendしてはじめて、DOMツリーに追加され、ブラウザに反映される。
・cloneNode()→要素を複製。trueを指定すると、中身もコピーされる。
・insertBefore(挿入する対象,挿入する場所)→要素を挿入
2-3.イベント
・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キーのみで送信可能。
2-4.削除
・remove() 一部の古いブラウザでは使えない
・親Node.removeChild(削除するNode)
3.要素の属性
・DOMでは、html属性と同じプロパティが用意されている。
間に-が入るbackground-colorなどは、backGroundColorになるので、
注意が必要。style属性の操作は、javascriptでも可能ではるが、基本CSS。
・classList→要素に紐づく複数のクラスを管理できる。
contains(含まれているか調べる),add(追加する),remove(削除する),
toggle(なければ追加、あれば削除)
・classNameでは、一つのクラスしか管理できないため、classListが便利。
4.カスタムデータ属性
・data-〇〇 →dataset.〇〇でアクセス可能
5.input要素の操作
・入力値→input要素のvalue属性で取得可能
・fonus()→フォーカスさせる
・selectbox→valueで選択された値
htmlのvalue属性にタグの中身と別の名前を付けることも可能
・ラジオボタン→queryselecterAllですべてのinput要素を取得する。
foreachで、選択された値を代入する変数に代入する。
・チェックボックス→queryselecterAllですべてのinput要素を取得する。
foreachで、選択された値を代入する配列に代入する。
(複数の値が選択されるため)
6.イベントの伝播
・親要素にイベントを追加して、子供をクリックして、
処理を行うことも可能。
イベント追加した要素(親要素) e.currenttarget
クリックした要素(子要素)e.target
7.その他
・Shift+Alt+F→コード整形
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?