22.DOM操作とは③ ～ボタンの操作とイベント監視～

昨日に引き続きDOM操作について整理していきたいと思います。

JavaScriptからボタンの操作

早速コードから書いていきます。

document.getById('test').click();

では１つずつ見ていきましょう

documentで、ブラウザで読み込んだHTMLファイルを取得します。

次に、

getById('test')

getById(引数)は引数に代入した文字列と同じIdを持つ要素を取得する関数ですね。

ですので、getById('test')とするとdocumentで取得したHTMLの中のIdが「test」の要素を取得します。ここでは、Id属性に「test」が設定されたボタン要素を用意しておくこととします。

最後は、

click()

click()関数は、その名前の通り要素をクリックする関数ですね。

ここでの動作は、先程のId属性に「test」が設定されたボタン要素をクリックします。

それでは全てを通して、再度確認してみましょう。

document.getById('test').click();

ブラウザに読み込まれたHTMLを取得し、

その中からId属性に「test」が設定された要素を取得、

そして取得した要素をクリック。

使い所のイメージがわかりませんが、

これで自動でクリックさせる動作が可能になりました。

既存ページに対してJavaScriptが適用できるなら、自動操作が可能になりそうですね。

イベントの監視

イベントってなんでしょう？

マウスのクリックとか、画面が読み込まれたとか

「状態の変化」と捉えられそうですね。

そして、「JavaScriptでイベント監視する」ということは

状態の変化があった時に何らかの処理をさせたい

ということです。

では早速コードを確認していきます。

window.onload = function(){ 実行させたい処理 }

window.onloadを言葉にするとそのまま

「画面が読み込まれた時」になります。

これは「画面の読み込みが終わった状態」という

状態変化を捉えているわけですね。

その時に、実行させたい処理を右側に書くことで、

画面の読み込みが終わった時に～～を実行するという動きが可能になるわけですね。

これは条件分岐でやったif(条件式)に少し似ている気がしますね。

もう１つ別のイベント監視について見てみましょう。

document.getById('test').addEventListener('click',function(){実行させたい処理};)

前半の要素の取得は「ボタンの操作」の所で説明済みなので割愛します。

addEventListener(引数1,引数2)を見ていきましょう。

これは引数1に指定したイベントが発生したら、引数2に設定した処理を実行する。

というものです。

ですので、

addEventListener('click',function(){実行させたい処理}

では、クリックイベントが発生したら、function(){実行させたい処理}が実行されるということです。

もちろんイベントを監視するのは、コード前半で取得済みのId属性が「test」の要素に対してですね。

今日のまとめ

• ボタン操作は要素を取得して、関数を使って行うことが出来る。
• イベントの監視というのは、要素等の状態変化の発生を監視している
• if（）に似ているが、状態の変化に対して処理を行うのがイベント監視

本日は、DOM操作について整理しました。

ようやくデイトラカリキュラムでいうところのDOM操作が終わりました。

次回からはjQueryの学習に入っていけそうです。

では、また。