JavaScript
無料で使えるAPI（2025年版）
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...
JavaScript JavaScript | DOM 操作：ノード操作 – appendChild
appendChild とは何かappendChild は、親ノードの「末尾」に子ノードを追加するメソッドです。DOM で新しく作った要素（createElement）や既存の要素を、指定した親の最後...
JavaScript JavaScript | DOM 操作：ノード操作 – createElement
createElement とは何かcreateElement は、JavaScript で新しい HTML 要素を“ゼロから”作るためのメソッドです。たとえば div、button、img、li な...
JavaScript JavaScript | DOM 操作：属性操作 – aria-* 属性
aria-* 属性とは何かARIA（Accessible Rich Internet Applications）の aria-* 属性は、UI の「意味・状態・関係」を支援技術（スクリーンリーダーなど...
JavaScript JavaScript | DOM 操作：属性操作 – checked
checked とは何かchecked は「チェックボックスやラジオボタンの“選択状態”」を表します。ここが重要です：HTMLの checked 属性は“初期状態”を示し、JavaScript の e...
JavaScript JavaScript | DOM 操作：属性操作 – input の value
input の value とは何かinput の value には「現在の入力値（プロパティ）」と「初期値（属性）」の2種類があります。JavaScript から扱うときは、今画面に表示されている“...
JavaScript JavaScript | DOM 操作：属性操作 – href・src の変更
href・src とは何かhref と src は、要素が「どこを指すか・何を読み込むか」を示す属性です。href はリンク先（a、link、area）、src はリソースの場所（img、script...
JavaScript JavaScript | DOM 操作：属性操作 – disabled 属性
disabled 属性とは何かdisabled は「フォーム要素を操作不可」にするための“boolean 属性”です。ボタン、入力欄、セレクト、テキストエリア、フィールドセットなどに付けると、フォーカ...
JavaScript JavaScript | DOM 操作：属性操作 – data-* 属性
data-* 属性とは何かdata-* 属性は、HTML 要素に「任意のメタ情報」を文字列として安全に持たせるための仕組みです。例として data-id、data-role、data-payload ...
JavaScript JavaScript | DOM 操作：属性操作 – hasAttribute
hasAttribute とは何かhasAttribute は、要素に指定した「属性が付いているか」を true/false で判定するメソッドです。値が空文字でも、属性が存在していれば true に...
JavaScript JavaScript | DOM 操作：属性操作 – removeAttribute
removeAttribute とは何かremoveAttribute は、要素から指定した「属性」を完全に取り除くメソッドです。title、href、src、aria-、data-、style など...