async 簡単に説明すると、非同期な処理をスッキリと書ける構文です。 async function () { 〜〜〜 } functionの前に「async」とつけるだけです。これで非同期処理を実行できる関数を定義したことになります。 ・asyncな関数は必ずPromiseを返します。 ・関数…

「Promise」を理解する前に重要な概念である「同期処理・非同期処理」と、「コールバック」についてまとめます。 同期処理 プログラムを上から下へ順番に一つずつ処理していくものになります。 処理：1 ↓ 処理：2 ↓ 処理：3 続く・・・ しかし、途中で時間の…

バブリング・・・ 何らかのイベントが発生した場合、その要素だけでイベントが発生するのではなくその要素の親要素へ順にイベントが伝わり、親要素でも同じイベントが発生します。（上にイベントが伝達されていくこと） バブル（泡）が上に上がっていくのを…

・change イベント フォーム( input 要素)や選択メニュー( select 要素 )、テキストエリア( textarea 要素)にてユーザーの操作によって値が変更されたときに発生するイベントです。 addEventListener メソッドを使用する場合はこのように記述します。 const …

ブラウザを開いている場合、例えばリンクをクリックすればリンク先のページへ移動したり、チェックボックスをクリックすればチェックされるといったデフォルトの動作がいくつか設定されています。 Event オブジェクトの preventDefault メソッドを使用するこ…

イベントオブジェクト・・・ イベントが発生し、イベントハンドラやイベントリスナーが呼び出されると、イベントオブジェクトというものが渡されます。 イベントオブジェクトには、イベントの詳細情報が保管されており、マウスの座標はどこにあるのか、どの…

click イベントはマウスのカーソルが要素の上にある状態で、マウスが押されたあとで離された時に発生するイベントです。 onclick 属性または onclick プロパティに対してイベントハンドラを設定できます。 また、addEventListener メソッドの引数として clic…

既に存在しているノードを削除する方法があります。 remove と removeChild です。 ・removeChild 親要素から見て、削除する要素をremoveChildに渡して削除するメソッドです。子要素を削除するものになります。 parentnode.removeChild(childnode) 実際にサ…

ページや要素の最後に署名や何かのお知らせなど、別の要素を追加したい時があると思います。 ・appendChild 特定の親要素の中に要素を追加するためのメソッドです。 要素を指定し、その要素の子要素として、HTMLタグを追加することができます。 追加される場…

特定の要素ノードから見た親要素、子要素、兄弟要素のノードを取得する方法について見ていきます。 これは例えば、ボタンをクリックした際に、親要素に何か追加したり、子要素に変更を加えたい時に役立ちます。 ・親要素を取得 node.parentElement // 特定の…

classList・・・ 特定の要素のクラス名を追加したり、削除したり、参照したりすることが出来る便利なプロパティとなります。classListの後にメソッドを定義することにより、追加削除などの機能を指定することができます。 add・・・クラスを追加 remove・・…

innerText・innerHTML・textContent この3つについての違いがわからなかったので簡単にまとめてみました。 ・innerText 選択した要素、またその全ての子要素のページ上で見えているものを表示します。 ※非表示の要素は返しません。 ある文章のpタグの値を取…

CSS のセレクタ形式で条件を指定して一致する要素を取得できるメソッドですが、違いがあるのでまとめてみました。 ・querySelector() 指定したセレクターの条件と一致したHTML要素のうち最初のひとつを返します。返り値は配列ではなく単一のデータとして返さ…

getElementsByTagName メソッドは、要素のタグ名を指定して一致する要素をすべて取得します。 document.getElementsByTagName(tagname) 例えば、divタグ、段落要素のpタグや画像要素のimgタグなどの要素を全て取得できます。 実際に確認してみましょう。 あ…