スポンサーリンク
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 など...
JavaScript

JavaScript | DOM 操作:属性操作 – setAttribute

setAttribute とは何かsetAttribute は、要素の「属性(attr)」に文字列の値を設定するためのメソッドです。href、title、alt、aria-、data- など、HTML...
JavaScript

JavaScript | DOM 操作:属性操作 – getAttribute

getAttribute とは何かgetAttribute は、要素に付いている「属性の値」を文字列で取り出すためのメソッドです。返ってくるのは“常に文字列”か“存在しないときは null”。ここが重...
JavaScript

JavaScript | DOM 操作:CSS / クラス操作 – getComputedStyle

getComputedStyle とは何かgetComputedStyle は、CSS の継承・外部スタイル・メディアクエリ・ユーザー設定などをすべて反映した「最終的な見え方」を取得するための関数です...
JavaScript

JavaScript | DOM 操作:CSS / クラス操作 – 要素の高さ・幅の取得

要素の高さ・幅の「どれを測るか」同じ「幅・高さ」でも、境界や余白の扱いで数値が変わります。どの API を使うかで意味が違うため、まず“何を含めたいか”を決めましょう。ここが重要です:枠線(borde...
JavaScript

JavaScript | DOM 操作:CSS / クラス操作 – visibility の切り替え

visibility の切り替えとは何かvisibility は「要素を見える/見えない」にするプロパティです。visibility: hidden にすると見えなくなりますが、レイアウト上の“場所”...
JavaScript

JavaScript | DOM 操作:CSS / クラス操作 – display の切り替え

display の切り替えとは何か要素の「表示・非表示」を制御する最基本の方法が display の切り替えです。display: none にすると要素は完全に消え、ページのレイアウト計算からも外れ...
JavaScript

JavaScript | DOM 操作:CSS / クラス操作 – スタイル変更(style)

style とは何かstyle は、要素の「インライン CSS(その要素だけに直接書くスタイル)」を JavaScript から読み書きするためのプロパティです。クラス切り替えより細かく数値や色を直接...
JavaScript

JavaScript | DOM 操作:CSS / クラス操作 – classList.contains

classList.contains とは何かclassList.contains は、要素に指定した「CSS クラスが付いているか」を真偽値で判定するメソッドです。返り値は true/false の...
JavaScript

JavaScript | DOM 操作:CSS / クラス操作 – classList.toggle

classList.toggle とは何かclassList.toggle は、要素に指定した「CSS クラス」を付けたり外したりするメソッドです。クラスが付いていなければ追加、付いていれば削除します...
JavaScript

JavaScript | DOM 操作:CSS / クラス操作 – classList.remove

classList.remove とは何かclassList.remove は、要素から指定した「CSS クラス」を安全に取り除くメソッドです。指定したクラスが付いていなければ何も起こらず、エラーにも...
JavaScript

JavaScript | DOM 操作:CSS / クラス操作 – classList.add

classList.add とは何かclassList.add は、要素に「CSS クラス」を安全に追加するためのメソッドです。すでに同じクラスが付いていても重複せず、必要なクラス名を1つ以上まとめて...
JavaScript

JavaScript | DOM 操作:CSS / クラス操作 – className

className とは何かclassName は、要素の class 属性(CSS クラス名の一覧)を「文字列として」読み書きするためのプロパティです。p, div などの要素に対して、クラスをまと...
JavaScript

JavaScript | DOM 操作:テキスト・内容変更 – 値の安全な出力方法

値の安全な出力方法とは何か「安全な出力」とは、外部データやユーザー入力を画面に表示・属性へ設定する際に、HTMLとして解釈・実行されないように扱うことです。ここが重要です:構造(HTML)は固定し、可...
JavaScript

JavaScript | DOM 操作:テキスト・内容変更 – テキストと要素の違い

テキストと要素の違いとは何かDOM は「要素ノード」と「テキストノード」でできています。要素ノードはタグ(div、p、span など)そのもので、属性やクラス、イベントを持てます。テキストノードは純粋...
JavaScript

JavaScript | DOM 操作:テキスト・内容変更 – 属性値の文字列化

属性値の文字列化とは何か「属性値の文字列化」は、DOM の属性に値を入れるとき、数値や真偽値、オブジェクトなど“文字列以外”の値を安全・意図通りの文字列に変換してから設定することです。ここが重要です:...
JavaScript

JavaScript | DOM 操作:テキスト・内容変更 – 改行・スペースの扱い

改行・スペースの扱いとは何かテキストの改行やスペースは、「どのプロパティで入れるか(textContent/innerText/innerHTML)」と「CSS の white-space 設定」によ...
JavaScript

JavaScript | DOM 操作:テキスト・内容変更 – insertAdjacentHTML

insertAdjacentHTML とは何かinsertAdjacentHTML は、指定した位置に「HTML文字列をそのままパースして挿入」するためのメソッドです。ターゲット要素の周囲や内側に、細...
JavaScript

JavaScript | DOM 操作:テキスト・内容変更 – createTextNode

createTextNode とは何かcreateTextNode は、「テキストノード」を新しく作るためのメソッドです。HTML の中身は要素ノード(div、p、span など)とテキストノード(純...
JavaScript

JavaScript | DOM 操作:テキスト・内容変更 – HTML インジェクションの危険性

HTML インジェクションとは何かHTML インジェクションは、外部から渡された文字列が「HTMLとして解釈・実行されてしまう」問題です。表示したい“文字”のはずがタグとして扱われると、画面の改ざん、...
JavaScript

JavaScript | DOM 操作:テキスト・内容変更 – innerHTML

innerHTML とは何かinnerHTML は、要素の「中身(子要素やテキスト)」を、HTML文字列として読み書きするためのプロパティです。文字列を代入すると、その場でパースされて要素やテキストに...
スポンサーリンク