テックキャンプ61日目

kobasaです(´ω`*)テレビで丸亀製麺のサイドメニューのランキングやってて、
めっちゃ食べたくなってきました。近所にはないんですよね。梅雨明けたら行こかな。

今日もJavaScriptの勉強。今のところ難点はメソッド名が長いくらいですかね?
paramsとかfind.allとかでデータのやり取りしてないので順調かもです。

61日目の勉強内容

HTML要素をJavaScript上で操作する方法

  1. HTMLの要素を取得。(id名やセレクタを指定)
  2. イベントが発生するタイミングを記述。(要素にマウスが乗ったときなど)
  3. イベントの処理内容を記述。(関数を定義し記述。要素を表示するなど)

流れを書くとこんな感じ。

HTMLの要素取得方法

document.getElementById("id名")
//id名を持つHTMLの要素を取得できる。id名はhtml上に1つしかないため単数形のElement

document.getElementsByClassName("class名")
//class名を持つHTMLの要素を全て取得できる。class名はhtml上に複数存在可能なので複数形のElements

document.querySelectorAll("セレクタ名")
// セレクタ名とはCSSでスタイルを適用するために指定している要素。適用部分の記述のこと。
// 引数名に指定したセレクタ名に合致するもの全てを取得できる。

getElementsByClassNamequerySelectorAllでクラスを指定した場合の違いは戻り値にある。

getElementsByClassNameHTMLCollectionというオブジェクトを返り値に持つ。
querySelectorAllNodeListというオブジェクトを返り値にもつ。
取得する要素が同じでも使えるメソッドが異なってくる。
もう少しカリキュラムを進めたらわかるみたい。

イベントの記述方法

addEventListener()メソッド
要素.addEventListener(‘イベント名’, 関数)で記述。イベント名=タイミング
イベント発生の際に実行する関数を定義するためのメソッド。

イベント名イベント発生のタイミング
loadブラウザのページ全体が読み込まれた後に発生。
ページが読み込まれないと要素を取得できないので、
このイベントの中に各イベントを記述していくことになる。
click指定された要素がクリックされたときに発生。
mouseoverマウスカーソルが指定した要素上に乗ったときに発生。
mouseoutマウスカーソルが指定した要素上から外れたときに発生。

コメント

  1. でも蕎麦派 より:

    丸亀製麺て意外と近所にないですよね。。。
    関東に住んでるので関西風のうどんだしのお店近所に欲しいんですけども(、ン、)

  2. kobasa より:

    関東には関西風のお店は少ないんですね(´・ω・`)
    スーパーなどで売っているのも関東風ばかりなんですかね?
    僕は関東のおしゃれなうどん食べてみた〜いです!

タイトルとURLをコピーしました