スポンサーリンク
JavaScript

JavaScript | DOM 操作:要素の位置・サイズ・スクロール – offsetWidth / offsetHeight

offsetWidth / offsetHeight とは何かoffsetWidth と offsetHeight は、要素の「見た目のサイズ」をピクセルで返すプロパティです。ここが重要です:bord...
JavaScript

JavaScript | DOM 操作:要素の位置・サイズ・スクロール – offsetTop / offsetLeft

offsetTop / offsetLeft とは何かoffsetTop と offsetLeft は、「その要素が“基準の親”(offsetParent)からどれだけ離れているか」を示すピクセル値で...
JavaScript

JavaScript | DOM 操作:イベント発展 – once: true

once: true とは何かonce: true は addEventListener のオプションで、「このリスナーは最初の一回だけ実行し、終わったら自動で取り外す」という宣言です。ここが重要です...
JavaScript

JavaScript | DOM 操作:イベント発展 – passive: true

passive: true とは何かpassive: true は、addEventListener のオプションで「このリスナーでは preventDefault を呼ばない」とブラウザに約束する設...
JavaScript

JavaScript | DOM 操作:イベント発展 – dispatchEvent

dispatchEvent とは何かdispatchEvent は「イベントを自分で発火させる」ためのメソッドです。DOM 要素や EventTarget に対して、既存のイベント(click など)...
JavaScript

JavaScript | DOM 操作:イベント発展 – カスタムイベント

カスタムイベントとは何かカスタムイベントは、あなたが「アプリ内の合図」を自由に作って通知できる仕組みです。DOM の仕組み(addEventListener / dispatchEvent)をそのまま...
JavaScript

JavaScript | DOM 操作:イベント発展 – コンテキストメニュー

コンテキストメニューとは何かコンテキストメニューは、右クリック(または長押し)した場所や対象に応じて“その場に適した操作”を提示するための UI です。ブラウザ標準のメニューを表示するイベントは co...
JavaScript

JavaScript | DOM 操作:イベント発展 – スクロールイベント

スクロールイベントとは何かスクロールイベントは、ページや特定のスクロール可能な要素のスクロール位置が変わった瞬間に発火する合図です。window(ページ全体)にも、overflow: auto などで...
JavaScript

JavaScript | DOM 操作:イベント発展 – フォーカスイベント

フォーカスイベントとは何かフォーカスイベントは「どの要素がキーボード操作の対象になったか/外れたか」を知らせる合図です。代表は focus(入る)、blur(出る)、そしてバブリングする仲間の foc...
JavaScript

JavaScript | DOM 操作:イベント発展 – イベント委譲

イベント委譲とは何かイベント委譲は、「たくさんの子要素それぞれにリスナーを付けず、親に1つだけ付けて子の操作に反応する」設計です。イベントがバブル(内側→外側)で伝わる仕組みを利用し、親のリスナー内で...
JavaScript

JavaScript | DOM 操作:イベント発展 – イベント伝播(キャプチャ / バブル)

イベント伝播とは何か(キャプチャ/バブルの全体像)イベント伝播は「ある要素で起きたイベントが、DOM ツリーの上下へ段階的に届く仕組み」です。段階は「キャプチャ(外側→内側)→ターゲット(実際の要素)...
JavaScript

JavaScript | DOM 操作:イベント発展 – stopPropagation

stopPropagation とは何かstopPropagation は「イベントが親要素へ伝わっていく流れ(伝播)を止める」ためのメソッドです。クリックなどのイベントは、最初に操作された要素から外...
JavaScript

JavaScript | DOM 操作:イベント基礎 – preventDefault

preventDefault とは何かpreventDefault は「イベントのデフォルト動作(ブラウザが標準で行う処理)」をキャンセルするためのメソッドです。例えばリンクの遷移、フォームの送信、ス...
JavaScript

JavaScript | DOM 操作:イベント基礎 – イベントのデフォルト動作

イベントのデフォルト動作とは何か「イベントのデフォルト動作」は、ブラウザが標準で行う振る舞いのことです。例として、リンクのクリックでページ遷移、フォームの submit で送信、テキスト入力で Ent...
JavaScript

JavaScript | DOM 操作:イベント基礎 – submit

submit とは何かsubmit は「フォームが送信される瞬間」に発火するイベントです。Enter キーや type="submit" のボタンで送信しようとしたとき、フォーム要素で受け取れます。こ...
JavaScript

JavaScript | DOM 操作:イベント基礎 – input / change

input と change とは何かinput と change は、フォーム要素の値が変わったときに発火するイベントです。input は「値が変わるたびに逐次発火」、change は「確定したタイ...
JavaScript

JavaScript | DOM 操作:イベント基礎 – キーボードイベント(keydown / keyup)

キーボードイベントとは何か(keydown / keyup)keydown は「キーが押された瞬間」、keyup は「キーが離された瞬間」に発火するイベントです。ショートカット、ゲームの操作、フォーム...
JavaScript

JavaScript | DOM 操作:イベント基礎 – マウスイベント(click / dblclick / mouseover)

マウスイベントの基礎(click / dblclick / mouseover)マウスイベントは「ユーザーの操作」をコードへ橋渡しする合図です。click は単押し、dblclick は素早い二連続ク...
JavaScript

JavaScript | DOM 操作:イベント基礎 – target と currentTarget

target と currentTarget とは何かイベントオブジェクトの target は「実際に操作された最も内側の要素」、currentTarget は「そのイベントリスナーが登録されている要...
JavaScript

JavaScript | DOM 操作:イベント基礎 – イベントオブジェクト

イベントオブジェクトとは何かイベントオブジェクト(一般に e と書く)は、「何が、どこで、どのように起きたか」の詳細を持つ“出来事の記録”です。addEventListener のコールバックに渡され...
JavaScript

JavaScript | DOM 操作:イベント基礎 – removeEventListener

removeEventListener とは何かremoveEventListener は、addEventListener で登録したイベントリスナーを「取り外す」ためのメソッドです。特定の要素(ま...
JavaScript

JavaScript | DOM 操作:イベント基礎 – addEventListener

addEventListener とは何かaddEventListener は「イベントが起きたときに実行する処理(リスナー)を登録する」ためのメソッドです。クリック、入力、スクロール、ロードなど、ブ...
JavaScript

JavaScript | DOM 操作:ノード操作 – prepend

prepend とは何かprepend は、親ノードの「先頭」にコンテンツを追加するメソッドです。ノード(要素やテキストノード)だけでなく、文字列も直接渡せ、さらに複数の引数を一度に追加できます。ここ...
JavaScript

JavaScript | DOM 操作:ノード操作 – append

append とは何かappend は、親ノードの「末尾」にコンテンツを追加するためのメソッドです。ノード(要素やテキストノード)だけでなく、文字列も直接渡せるのが特徴です。ここが重要です:appen...
JavaScript

JavaScript | DOM 操作:ノード操作 – remove(直接削除)

remove とは何か(直接削除のイメージ)remove は、要素自身が「自分を親から切り離して画面から消える」ためのメソッドです。document.getElementById("x").remov...
JavaScript

JavaScript | DOM 操作:ノード操作 – fragment の利用

DocumentFragment とは何かDocumentFragment(以下フラグメント)は、DOM に一時的に要素を“まとめて保持するための入れ物”です。画面(実DOM)にまだ接続されていないミ...
JavaScript

JavaScript | DOM 操作:ノード操作 – cloneNode

cloneNode とは何かcloneNode は、既存の DOM ノード(要素やテキスト)を“複製”するメソッドです。形は node.cloneNode(deep)。ここが重要です:deep が f...
JavaScript

JavaScript | DOM 操作:ノード操作 – replaceChild

replaceChild とは何かreplaceChild は「親ノードの子を別のノードに置き換える」メソッドです。形は parent.replaceChild(newChild, oldChild)...
JavaScript

JavaScript | DOM 操作:ノード操作 – removeChild

removeChild とは何かremoveChild は「親ノードから指定した子ノードを取り外す」メソッドです。形は parent.removeChild(child)。画面から消えるだけでなく、D...
JavaScript

JavaScript | DOM 操作:ノード操作 – insertBefore

insertBefore とは何かinsertBefore は「親ノードの中で、指定した子ノードの“直前”に新しいノードを挿入する」メソッドです。形は parent.insertBefore(newN...
スポンサーリンク