HTML

HTML DOM のアンカー（<a> タグ）に用意されている username プロパティは、href 属性に含まれる「ユーザー名」部分の値を取得または設定するためのプロパティです。ユーザー名はユーザーが入力する情報で、多くの場合パスワードとペアで使用されます。URL 内では、プロトコル（https:// など）の直後、パスワード部分の直前に指定されます。 例えば、次のような URL を見てみましょう。https://john:john123@www.examplesite.comこの場合、「john」がユーザー名、「john123」がパスワードに相当します。 構文 usernam

HTML DOM のアンカーコレクション（Anchor Collection）は、HTML ドキュメント内に存在するすべてのアンカータグ（<a>）のコレクションを返すための機能です。ただし、name 属性が設定されているリンクのみがカウントの対象となる点に注意してください。なお、name 属性は現在の HTML5 では非推奨（deprecated）とされています。コレクション内の要素は、HTML ソースコード内に記述された順序と同じ順序で格納されます。アンカーコレクションのプロパティアンカーコレクションには、以下のプロパティが用意されています。プロパティ説明lengthHTML ド

HTML DOM の AnimationEvent は、CSS アニメーションの実行時に発生するさまざまなイベントを処理するための JavaScript オブジェクトです。アニメーションに関連するイベント情報を取得でき、どのイベントがアニメーションをトリガーしたのかを把握することで、CSS アニメーションをより柔軟かつ精密に制御することが可能になります。 AnimationEvent の主なプロパティ AnimationEvent には、以下のプロパティが用意されています。 プロパティ説明 animationName実行中のアニメーションの名前（@keyframes で定義した名前）を返し

HTML DOMのappendChild()メソッドは、新しく作成したテキストノードや要素ノードを、親ノードの子ノードリストの末尾に追加するために使用します。さらに、既存の要素を現在の位置から別の位置へ移動させることも可能です。appendChild()を使えば、リストに新しい項目を追加したり、ある段落の下に別の段落を追加したりすることもできます。 構文 appendChild()メソッドの構文は以下のとおりです。 node.appendChild( node ) ここで指定するパラメータ「node」は、追加対象となるオブジェクトです。このパラメータは必須となります。 サンプルコード それでは

HTML DOM の Area オブジェクトは、HTML のイメージマップ（image map）に関連付けられたオブジェクトです。Area は、イメージマップ内にあるクリック可能な領域（リンク領域）を表します。Area オブジェクトを使用すると、<area> 要素の作成やアクセスが可能になります。ユーザーの入力に応じて、マップ内のクリック可能な領域やイメージマップの形状などを動的に変更できるほか、area 要素内のリンクを操作することもできます。Areaオブジェクトの主なプロパティArea オブジェクトには、以下のようなプロパティが用意されています。プロパティ説明altalt 属性

HTML DOM の Article オブジェクトは、HTML5 で新たに導入された <article> 要素を JavaScript から操作するための仕組みです。<article> 要素は、文書内で独立した自己完結型のコンテンツ領域を表すセマンティック（意味的）タグの一つであり、ブログ記事、ニュース投稿、フォーラムのコメントなどに適しています。Articleオブジェクトを作成する構文JavaScript で新しい article 要素を動的に生成するには、document.createElement() メソッドを使用します。var a = document.cre

JavaScriptのLocationオブジェクトにおけるsearchプロパティは、URLに含まれるクエリ文字列（「?」以降の部分）を取得または設定するためのプロパティです。例えば、「https://example.com/page?name=taro&id=123」というURLの場合、searchプロパティは「?name=taro&id=123」という文字列を返します。 構文 searchプロパティの基本的な構文は以下のとおりです。 値の取得 location.search 値の設定 location.search = searchString 使用例 ここでは、実際にsearchプ

HTML DOM の Mapオブジェクト は、HTML の <map> 要素を JavaScript から操作するためのインターフェースです。<map> 要素は、1枚の画像上の特定の領域にそれぞれ異なるリンクを設定できる「クリッカブルマップ（イメージマップ）」を作成する際に使用されます。 構文 <map> 要素を新しく作成する場合は、以下のように記述します。 var mapObject = document.createElement(MAP); Mapオブジェクトのプロパティ一覧 mapObject が持つ主なコレクションおよびプロパティは次のとおりです

HTML DOMのMarkオブジェクトは、HTMLの<mark>要素をJavaScriptから操作するためのオブジェクトです。<mark>要素は、テキストの一部をマーカーで塗ったようにハイライト表示するために使用され、ユーザーの注意を引きたい部分を強調するのに便利です。JavaScriptを使えば、この要素を動的に生成してページに挿入することもできます。構文Markオブジェクトを作成するための構文は以下の通りです。<mark>要素の作成var markObject = document.createElement(MARK)サンプルコードHTML DOM M

HTML DOM MenuオブジェクトとはHTML DOM Menuオブジェクトは、HTMLドキュメント内の<menu>要素を表し、JavaScriptから操作するためのインターフェースです。注意： <menu>要素は、Mozilla Firefoxブラウザでのみサポートされています。ChromeやEdge、Safariなどの他の主要ブラウザでは正しく動作しないため、実務で利用する際は対象ブラウザに十分注意してください。構文<menu>要素を新規作成する場合は、以下の構文を使用します。var menuObject = document.createEleme

HTML DOM の MenuItem オブジェクトは、HTML の <menuitem> 要素を JavaScript から操作するためのインターフェースです。コンテキストメニュー（右クリックメニュー）に独自のコマンド項目を追加したい場合などに利用されます。注意： <menuitem> 要素は、かつて Mozilla Firefox のみが独自にサポートしていた要素です。現在では HTML 仕様から削除され非推奨となっているため、最新のブラウザでは動作しない点に留意してください。本記事では、参考情報としてこのオブジェクトの構造と使い方を解説します。MenuItemオブ

HTML DOM MetaオブジェクトとはHTML DOMのMetaオブジェクトは、HTMLドキュメント内の<meta>要素をJavaScriptから操作するためのインターフェースです。このオブジェクトを利用することで、ページの文字コードや説明文、キーワードといったメタ情報を、動的に作成・変更することができます。構文Metaオブジェクトの基本的な構文は以下の通りです。<meta>要素を作成する場合：var metaObject = document.createElement(META)Metaオブジェクトの主なプロパティmetaObjectには、以下のプロパティが用意

HTML DOMのMeter highプロパティは、<meter>要素のhigh属性に対応する数値を取得（返却）または設定するためのプロパティです。high属性は「高め」とみなされる範囲の下限値を示し、low属性、min属性、max属性と組み合わせて使うことで、測定値の状態（低・適正・高）をより正確に表現できます。 構文 highプロパティの基本的な構文は以下の通りです。 値を取得する場合 meterElementObject.high 値を設定する場合 meterElementObject.high = number サンプルコード ここで、Meter highプロパティの具体的

Meter lowプロパティは、<meter>要素のlow属性に対応する数値を取得または設定するためのプロパティです。high、min、max属性と組み合わせて使用することで、測定値の範囲をより正確に表現できます。 構文 以下が構文です − lowプロパティの値を取得する場合 meterElementObject.low lowプロパティに値を設定する場合 meterElementObject.low = number ポイント low属性は、範囲の中で「低い」とみなされる値の上限を指定します min ≤ low ≤ high ≤ max という関係を満たす必要があります 現在の

Meter maxプロパティとはmeterオブジェクトのmaxプロパティは、HTMLの<meter>要素におけるmax属性に対応する数値を、取得または設定するためのプロパティです。<meter>要素は測定値や使用量などを視覚的に表示するための要素で、max属性はその測定範囲の最大値を表します。このmaxプロパティは、min（最小値）、low（低域しきい値）、high（高域しきい値）などの属性と組み合わせて使うことで、より精度の高いゲージ表示を実現できます。構文maxプロパティの値を取得する場合meterElementObject.maxmaxプロパティに値を設定する場合

Meter の min プロパティは、HTML の <meter> 要素における min 属性に対応する数値を、JavaScript から取得または設定できるプロパティです。このプロパティを max、high、low などの各属性と組み合わせて使うことで、より正確で視覚的に分かりやすいメーター表示を実現できます。 構文 min プロパティの基本的な構文は以下のとおりです。 現在の値を取得する場合 meterElementObject.min 新しい値を設定する場合 meterElementObject.min = number 取得時には min 属性に対応する数値が返され、設定時

Location hashプロパティとは？ Location hashプロパティは、HTML DOMにおいて現在のURLの「アンカー部分」（フラグメント識別子）を取得・設定するためのプロパティです。値を設定すると、先頭に「#」が自動的に付加されたうえでURLに追加されます。 たとえば「https://www.example.com/#section1」というURLの場合、location.hashは「#section1」を返します。 構文 基本の書き方は以下のとおりです。 hashプロパティの値を取得する場合 location.hash hashプロパティに値を設定する場合 location.

Location hostプロパティは、現在のURLにおけるホスト名とポート番号(指定されている場合)を取得・設定するためのプロパティです。なお、ポート番号が明示的に指定されていない場合は、返される値にポートが含まれないことがあります。構文構文は以下の通りです。hostプロパティの値を取得する場合location.hosthostプロパティに値を設定する場合location.host = hostname:host使用例ここで、Location hostプロパティの具体的な使用例を見てみましょう。以下のサンプルでは、URL入力欄と「Get Port」ボタンを配置し、ボタンをクリックすると現在の

JavaScriptのLocationオブジェクトが持つhostnameプロパティは、現在のURLからホスト名（ドメイン名）を取得、または新しいホスト名を設定するために使用されます。なお、hostnameプロパティにはポート番号は含まれません。ポート番号も含めて取得したい場合は、hostプロパティを使用してください。 構文 hostnameプロパティの基本的な構文は以下の通りです。 ホスト名を取得する場合 location.hostname ホスト名を設定する場合 location.hostname = hostname 使用例 ここでは、Location hostnameプロパティを

HTML DOM の Location href プロパティは、現在のドキュメントの URL に対応する文字列を取得または設定します。値を読み取ればページの完全な URL を確認でき、新しい値を代入すればその URL へページを遷移させることも可能です。 構文 以下に構文を示します − href プロパティの値を取得する場合 location.href href プロパティに値を設定する場合 location.href = href 例 Location href プロパティの具体的な使用例を見てみましょう − <!DOCTYPE html> <html> <he