デフォルト引数
関数名(引数=デフォルト値)で引数を与えなかった場合の挙動を指定
スプレッド構文
- 配列の中身を渡す
- math.max(配列名)では配列のアドレスが渡されるだけ
- math.max(...配列名)なら〇
スプレッド構文を用いたオブジェクトの操作
- オブジェクト１={〇〇｝,オブジェクト2={××｝があるとする。
- オブジェクト3 ={...オブジェクト１}でオブジェクトのコピー
- オブジェクト4 ={...オブジェクト１,...オブジェクト2}においてかぶっているプロパティ名がある場合:オブジェクト2のプロパティが優先される。
レスト構文
- スプレッド構文と似ているが違うもの
- 関数名(...引数名)とすることで引数に配列を渡せる
- print(...num){console.log(num)}; print(1,2,3); /[1,2,3]/
タグ操作
- タグ.append(内容)でテキスト内容や他のタグを操作対象のタグの中に入れ込むことができる
DOM操作
テキスト操作
- 通常のテキスト操作:要素.innerText = "A"
- HTML要素を含めたテキスト操作:要素.innerHTML = <ディヴ>A<ディヴ>'
親子要素操作
- 親:要素.parentElement
- 子供:要素.childElement
- 兄弟:要素.nextElementSibling
要素の追加
step1 A = document.createElement()でタグを作る
step2 中身を設定する A.innerTextなど
step3 親.appendChild(A)で場所を決める
もしくはinsertAdjacentElement("兄要素",A)
要素の削除
A.remove()
属性操作
- 属性名 class,属性値 A (class="A")という属性に対して
- getAttribute("属性名")などでそのクラスの属性を取得
- setAttribute("属性名",属性値)
class操作
- クラス属性値の追加:要素.classList.add()
- クラス属性値のつけ外し:要素.classList.toggle()
name操作
- elements.name属性値でアクセスできる
スタイル操作
- 要素.style.color="red"
DOMイベント
クリックイベント
addEventListener("click",関数)
フォームイベント
HTML内のform-inputタグで起こるイベントはどこか(action="")に情報を送信する際にページの切り替えが起こる。
- submit:帰ってきた情報を基に処理を行う。ページのリフレッシュは起こる。
- e.prepentdefault():デフォルトの動作(ページのリフレッシュ)を止めることができる。ちゃんと情報の送信などはできる
- フォームに記入された内容:要素.valueで獲得できる。
thisの値
呼び出し元のオブジェクトに依存する