JavaScript

スポンサーリンク
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文字列として読み書きするためのプロパティです。文字列を代入すると、その場でパースされて要素やテキストに...
JavaScript

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

innerText とは何かinnerText は「画面に見えているテキスト」を読み書きするためのプロパティです。値を読むと、CSS の表示状態を考慮して“今見えている文字列”だけが返ります。値を書き...
JavaScript

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

textContent とは何かtextContent は、要素の「テキストだけ」を安全に読み書きするためのプロパティです。値を設定すると、要素内のテキストノードが置き換わり、HTML タグは「ただの...
JavaScript

JavaScript | DOM 操作:要素の取得 – 要素の存在チェック

要素の存在チェックとは何か「要素の存在チェック」は、操作したい要素が本当に DOM にあるかを確認し、なければ安全にスキップしたり代替処理に切り替えたりすることです。ここが重要です:存在を前提に書くと...
JavaScript

JavaScript | DOM 操作:要素の取得 – matches

matches とは何かmatches は、ある要素が「指定した CSS セレクタに現在一致しているか」を真偽値で返すメソッドです。ここが重要です:取得した要素に対して直接判定できるため、「このクリッ...
JavaScript

JavaScript | DOM 操作:要素の取得 – closest

closest とは何かclosest は、ある要素から「自分自身を含めて、上方向(祖先方向)にセレクタに一致する最初の要素」を返すメソッドです。見つかればその要素、見つからなければ null。ここが...
JavaScript

JavaScript | DOM 操作:要素の取得 – 親要素・子要素の取得

親要素・子要素とは何かDOM は木構造で、要素どうしが「親子」の関係を持ちます。ある要素を内側に包む要素が親、内側に含まれている要素が子です。ここが重要です:DOM 操作では「どの範囲(親配下)を対象...
JavaScript

JavaScript | DOM 操作:要素の取得 – CSS セレクタの使い分け

CSS セレクタの使い分けとは何かCSS セレクタは、HTML の中から「どの要素を対象にするか」を表す記法で、querySelector / querySelectorAll でもそのまま使えます。...
JavaScript

JavaScript | DOM 操作:要素の取得 – querySelectorAll

querySelectorAll とは何かquerySelectorAll は、CSS セレクタを使って「一致するすべての要素」を取得するメソッドです。返り値は NodeList(静的コレクション) ...
JavaScript

JavaScript | DOM 操作:要素の取得 – querySelector

querySelector とは何かquerySelector は、CSS セレクタで「最初に一致した1つの要素」を取得するためのメソッドです。返り値は要素か、見つからなければ null。ここが重要で...
JavaScript

JavaScript | DOM 操作:要素の取得 – getElementsByTagName

getElementsByTagName とは何かgetElementsByTagName は、指定したタグ名(例: "div", "p", "a")を持つ要素をまとめて取得するメソッドです。返り値は...
JavaScript

JavaScript | DOM 操作:要素の取得 – getElementsByClassName

getElementsByClassName とは何かgetElementsByClassName は、「指定したクラス名を持つ要素をまとめて取得する」ためのメソッドです。返り値は HTMLColle...
JavaScript

JavaScript | DOM 操作:要素の取得 – getElementById

getElementById とは何かgetElementById は、document(ページ全体の入口)から「id が一致する要素を1つだけ即座に取得する」ための最短ルートです。見つかれば要素を返...
JavaScript

JavaScript | DOM 操作:DOM 基礎 – 静的 NodeList とライブ HTMLCollection の違い

静的 NodeList とライブ HTMLCollection とは何か静的 NodeList とライブ HTMLCollection は、DOM から複数ノードを集めた「コレクション」を表します。違...
JavaScript

JavaScript | DOM 操作:DOM 基礎 – DOM API の基本概念

DOM API とは何かDOM API は、ブラウザが作る「HTML の木構造(DOM ツリー)」を JavaScript から読み書きするための関数やプロパティ群です。document を起点にノー...
JavaScript

JavaScript | DOM 操作:DOM 基礎 – HTML と JavaScript の紐づけ

HTML と JavaScript の紐づけとは何かHTML は「見た目と構造」、JavaScript は「動きと振る舞い」を担当します。紐づけとは、HTML の要素を JavaScript から選び...
JavaScript

JavaScript | DOM 操作:DOM 基礎 – DOM の読み込み順序

DOM の読み込み順序とは何かDOM の読み込み順序は、ブラウザが HTML を上から解析し、DOM ツリーを構築していく過程の時間軸です。重要なのは「ブラウザは文書を一気に読み終えてから作るのではな...
JavaScript

JavaScript | DOM 操作:DOM 基礎 – window と document の違い

window と document の違いwindow は「ブラウザタブ(ウィンドウ)そのもの」を表す最上位のオブジェクトです。タイマー、画面サイズ、スクロール、イベント、ストレージ、ネットワークなど...
JavaScript

JavaScript | DOM 操作:DOM 基礎 – DOMContentLoaded

DOMContentLoaded とは何かDOMContentLoaded は、「ブラウザが HTML の構文解析を終えて、DOM ツリーの構築が完了した瞬間」に発火するイベントです。ここが重要です:...
JavaScript

JavaScript | DOM 操作:DOM 基礎 – 要素ノード / テキストノード

要素ノード / テキストノードとは何か要素ノードは HTML のタグそのもの(div, p, a など)を表し、属性(id, class, style など)や子ノードを持てます。テキストノードは、要...
JavaScript

JavaScript | DOM 操作:DOM 基礎 – ドキュメントツリーの構造

ドキュメントツリーとは何かドキュメントツリーは、HTML文書を「ノード(要素・テキスト・コメント)」の入れ子で表した木構造です。最上位の document を根にして、html、head、body と...
JavaScript

JavaScript | DOM 操作:DOM 基礎 – ノードとは何か

ノードとは何かDOMの「ノード」は、HTML文書を構成する最小パーツのことです。要素(div、p、aなど)、テキスト(文字列)、コメント、属性など、画面に関係するすべてがノードとして木構造に並びます。...
JavaScript

JavaScript | DOM 操作:DOM 基礎 – DOM とは何か

DOM とは何かDOM(Document Object Model)は、ブラウザが「HTML や XML の文書をプログラムから操作できるようにした、木構造のデータモデル」です。ページは「ノード(要素...
スポンサーリンク