HTML

HTML DOMのlastElementChildプロパティは、指定したノードにおける最後の子要素ノードを、ノードオブジェクトとして取得するためのプロパティです。注意：このプロパティはテキストノードやコメントノードを無視し、要素ノードのみを対象とします。そのため、lastChildプロパティとは異なり、空白文字によるテキストノードが存在しても正しく最後の要素を取得できるのが特徴です。 構文 lastElementChildプロパティの構文は以下の通りです。 nodeList.lastElementChild 戻り値として、指定した親ノードの直下にある最後の子要素ノードが返されます。子要素が1つ

HTML DOMのlastModifiedプロパティは、現在のドキュメントが最後に更新された日時を文字列として返します。このプロパティは読み取り専用で、JavaScriptを使えばページの最終更新日を簡単に取得して表示できます。 返される日時の形式は一般的に「MM/DD/YYYY hh:mm:ss」です。静的なHTMLファイルではファイル自体の最終更新日時が返されますが、動的に生成されるページではサーバー側の設定によって返される値が変わる点に注意してください。 構文 lastModifiedプロパティの構文は以下の通りです。 最終更新の日時を取得する場合 − document.lastMod

HTML DOM の Legend form プロパティは、<legend> 要素を囲んでいる <form> 要素への参照を返します。このプロパティを使うことで、JavaScript から legend 要素が属するフォームの情報（id や name など）に簡単にアクセスできます。なお、legend 要素がどのフォームにも含まれていない場合は null が返されます。構文form オブジェクトへの参照を取得するには、以下のように記述します。legendObject.form戻り値legend 要素を含む親フォーム（<form> 要素）への参照を返します。親

HTML DOM LegendオブジェクトとはHTML DOMのLegendオブジェクトは、HTMLの<legend>要素をJavaScriptから操作するためのインターフェースです。<legend>要素は、<fieldset>要素でグループ化したフォームコントロールにキャプション（見出し）を付けるために使用されます。構文構文は以下のとおりです。<legend>要素を作成する場合var legendObject = document.createElement("LEGEND");プロパティLegendObjectで利用できる

HTML DOMのlengthプロパティは、ノードリスト（NodeList）オブジェクトに含まれるノードの総数を表す数値を返します。JavaScriptでDOM要素を動的に操作する際、対象となるノードの個数を把握するために頻繁に使われる、非常に基本的かつ重要なプロパティです。 lengthプロパティの構文 lengthプロパティの構文は以下のとおりです。 nodeListオブジェクト内のノード数を返します。 nodeList.length lengthプロパティの使用例 それでは、HTML DOM lengthプロパティを使った具体的な例を見てみましょう。次のコードでは、ページ内にある<

HTML DOMにおけるLiオブジェクトは、HTMLドキュメント内の<li>（リスト項目）要素を表すオブジェクトです。JavaScriptを使うことで、順序リストや箇条書きリストの各項目を動的に生成・変更することができます。 構文 <li>要素を作成するための基本的な構文は以下の通りです。 var liObject = document.createElement(LI) document.createElement()メソッドにLIを渡すことで、新しいリスト項目要素をプログラムから生成できます。 プロパティ Liオブジェクトには、以下のプロパティが用意されています。

KeyboardEvent の charCode プロパティは、キーボードイベントで押された文字に対応する Unicode 文字コード（数値）を返すプロパティです。注意： 正確な結果を得るためには、代わりに key プロパティを使用することが推奨されています。charCode は非推奨となっており、ブラウザによっては期待どおりに動作しない場合があります。構文構文は以下のとおりです。直近に入力された文字の charCode を取得する場合：event.charCode使用例ここでは、KeyboardEvent charCode プロパティの具体的な使用例を見てみましょう。テキストフィールドに入力

KeyboardEventのcodeプロパティとはJavaScriptのKeyboardEventオブジェクトが持つcodeプロパティは、キーボードイベント発生時に押されたキーに対応するキー識別子（キーコード）を返します。例えば、「A」キーであればKeyA、EnterキーであればEnterといった値が取得できます。注意： ユーザーが入力した文字を正確に判定したい場合は、codeプロパティではなくkeyプロパティを使用することが推奨されています。codeプロパティとkeyプロパティの違いcodeプロパティはキーボード上の物理的なキーの位置を示すため、JIS配列やUS配列などのキーボードレイアウト

getModifierState()メソッドは、指定した修飾キー（モディファイアキー）が現在押されているかどうかを判定し、押されていればtrue、押されていなければfalseを返します。CapsLockのように画面からは把握しにくいキーの状態をJavaScriptから手軽に確認できるため、パスワード入力中にCapsLockのオンを警告するなど、ユーザビリティ向上を目的とした場面でよく活用されています。構文getModifierState()メソッドの基本構文は次のとおりです。引数には、状態を調べたい修飾キーの名前を文字列で指定します。event.getModifierState("m

HTML DOM の KeyboardEvent オブジェクトが持つ key プロパティは、ユーザーが押したキーに対応する「キー識別子」を文字列として返します。このプロパティを活用することで、どのキーが入力されたのかを簡単に判別でき、フォームのバリデーションやショートカット機能の実装などに役立ちます。基本情報対象イベント： keydown / keyup / keypress などのキーボードイベント戻り値： 押されたキーに対応する文字列（例：「a」「Enter」「Shift」など）読み取り専用： 値の設定はできません構文最後に入力されたキーの識別子を返す構文は以下のとおりです。event.k

KeyboardEventのkeyCodeプロパティは、イベント発生時に押されたキーに対応するUnicode文字コードを返します。注意： 現在、keyCodeは非推奨（Deprecated）となっています。正確な結果を得るためには、keyプロパティの使用が推奨されます。ただし、レガシーコードの保守などでは今もよく使われるため、動作を理解しておくことは重要です。構文keyCodeを取得する基本的な構文は以下の通りです。直近で入力された文字のkeyCodeを返す場合 −event.keyCodeサンプルコードそれでは、KeyboardEventのkeyCodeプロパティを使った具体的な例を見てみま

HTML DOMのKeyboardEventオブジェクトが持つlocationプロパティは、キーボード上で押されたキーの位置（場所）に対応する数値を返します。このプロパティを使うことで、同じ文字でもキーボードのどのエリアで入力されたのかを判別できます。構文押されたキーの位置を取得するには、以下のように記述します。event.location戻り値となる数値の一覧locationプロパティが返す数値は以下の4種類です。数値説明0キーボードの中央セクションにあるほぼすべてのキーを表します。（例：「Q」「\」、スペースキーなど）1キーボード左側セクションのキーを表します。（例：左Ctrl、左Shif

HTML DOMのKeyboardEvent metaKeyプロパティは、キーボードイベントが発生した時点でMetaキーが押されていたかどうかを、真偽値（true / false）で返すプロパティです。なお、Metaキーは環境によって対応するキーが異なり、Windowsでは「Windowsキー」、Macでは「Command（⌘）キー」に該当します。ユーザーが修飾キーを組み合わせた操作を行ったかどうかを判定したい場合に便利です。構文metaKeyプロパティの値を取得するには、以下のように記述します。event.metaKey戻り値： イベント発生時にMetaキーが押されていれば true、押され

HTML DOM の KeyboardEvent オブジェクトにおける shiftKey プロパティは、イベントが発生した時点でユーザーが Shift キーを押していたかどうかを示すブール値（true / false）を返します。キーボード操作に応じた動的な処理を実装したい場合に役立つプロパティです。構文（シンタックス）shiftKey プロパティの基本的な構文は以下の通りです。ブール値を取得する場合event.shiftKeyShift キーが押されていれば true、押されていなければ false が返されます。サンプルコードそれでは、KeyboardEvent shiftKey プロパテ

HTML DOMのKeyboardEventオブジェクトは、ユーザーがキーボードのキーを押したり離したりした際に発生するイベントを表すオブジェクトです。このオブジェクトを利用することで、押されたキーの種類や修飾キー（Alt・Ctrl・Shiftなど）の状態を取得でき、キーボード操作に応じたインタラクティブなWebページを作成できます。KeyboardEventの主なプロパティとメソッドKeyboardEventオブジェクトには、以下のようなプロパティおよびメソッドが用意されています。プロパティ／メソッド説明altKey「ALT」キーが押されているかどうかを返しますcharCodeキーのUnic

HTML DOMのLabelオブジェクトが持つhtmlForプロパティは、label要素の「for」属性の値を取得・設定するためのプロパティです。「for」属性はラベルとフォーム部品（input要素など）を関連付ける役割を持っており、このプロパティを使えばJavaScriptからその関連付けを動的に操作できます。 構文 htmlForプロパティの基本構文は以下の通りです。 for属性の値を取得する labelObject.htmlFor for属性の値を設定する labelObject.htmlFor = value サンプルコード それでは、Label htmlForプロパティの使用例を見て

HTML DOMのinsertAdjacentHTML()メソッドは、テキスト文字列をHTMLとして解析し、指定した位置に挿入するためのメソッドです。innerHTMLプロパティのように既存のコンテンツを上書きすることなく、要素の前後や内部に新しいHTMLを追加できるのが大きな特徴です。 構文 insertAdjacentHTML()は、第1引数に挿入位置を示す文字列（positionString）、第2引数に挿入するHTMLコード（htmlString）を指定して呼び出します。 node.insertAdjacentHTML(positionString, htmlString) pos

HTML DOMのinsertAdjacentText()メソッドは、指定した位置にテキスト文字列を挿入するためのメソッドです。既存の要素や子ノードを書き換えることなく、対象ノードを基準とした相対的な位置に新しいテキストノードを追加できます。 構文 insertAdjacentText()は、第1引数に挿入位置を示す「positionString」、第2引数に挿入するテキストを指定して呼び出します。 node.insertAdjacentText(“positionString”, text) positionStringに指定できる値 positionStringに

insertBefore()メソッドとはHTML DOMのinsertBefore()メソッドは、すでに存在する子ノードの直前に、新しいノードを挿入するためのメソッドです。リストの先頭に項目を追加したい場合など、DOM操作で要素の挿入位置を細かく制御したいときに非常に便利です。構文insertBefore()メソッドの基本的な構文は以下の通りです。node.insertBefore(newNode, existingNode)パラメータこのメソッドには、以下の2つのパラメータを指定します。パラメータ説明newNode先頭に追加したい、新しく作成した子ノードですexistingNodeすでに存在

HTML DOMのisContentEditableプロパティは、要素のコンテンツが編集可能かどうかを判定し、その結果を真偽値（boolean）として返します。このプロパティは、HTMLのcontenteditable属性の状態を反映しており、動的に要素の編集可否を確認したい場合に役立ちます。構文構文は以下のとおりです。真偽値（true / false）を返します。HTMLElementObject.isContentEditable戻り値（真偽値）このプロパティは、以下のbooleanValueを返します。booleanValue説明trueHTMLElementObjectのコンテンツが編