HTML

HTML DOM の clientTop プロパティは、要素の上ボーダー（境界線）の幅をピクセル単位で返します。読み取り専用のプロパティであるため、値を設定することはできません。また、要素の上マージンや上パディングは含まれない点にも注意が必要です。 構文 clientTop プロパティの基本的な構文は以下のとおりです。 element.clientTop; 使用例 ここでは、clientTop プロパティを使って div 要素の上ボーダーの幅を取得する例を紹介します。ボタンをクリックすると、指定した div の上ボーダーの幅がピクセル単位で表示されます。 <!DOCTYPE ht

clientWidthプロパティとはHTML DOMのclientWidthプロパティは、HTML要素の表示可能な幅（可視領域の幅）を取得するために使用されます。この幅にはパディング（padding）が含まれますが、ボーダー（border）、スクロールバー、マージン（margin）は含まれません。また、コンテンツが要素からあふれていても、要素自体の幅だけが返される点に注意してください。構文clientWidthプロパティの構文は以下のとおりです。element.clientWidthサンプルコードHTML DOMのclientWidthプロパティの具体的な使用例を見てみましょう。<!DO

HTML DOM のクリップボードイベントは、クリップボードに対する操作に関する情報を取得・処理するために使用されるイベントです。対象となる操作は「切り取り（cut）」「コピー（copy）」「貼り付け（paste）」の3種類です。クリップボードイベントを活用すると、「テキストがコピーされました」のように、クリップボードがどのように変更されたかをユーザーへフィードバックできます。これにより、サイトのアクセシビリティやユーザビリティを高めることが可能になります。クリップボードイベントのプロパティクリップボードイベントには、以下のプロパティが用意されています。プロパティ説明clipboardData

HTML DOMのcloneNode()メソッドは、呼び出し対象のノードのコピーを作成し、その複製を返すメソッドです。このメソッドを使うことで、指定したノードが持つすべての属性と値をまとめて複製できます。構文cloneNode()メソッドの基本構文は以下の通りです。yourNode.cloneNode([deep])ここで「deep」は省略可能なパラメータです。値に「true」を設定すると、対象ノードだけでなく、その子ノードや属性・値もすべて一緒に複製されます。逆に「false」を設定すると、対象ノード自身とその属性・値のみがコピーされ、子ノードは複製されません。サンプルコードそれでは、HTM

HTML DOMのclose()メソッドは、出力ストリームを閉じるために使用されるメソッドです。ドキュメントへの書き込みが完了したことをブラウザに通知する役割を持ちます。このメソッドは引数（パラメータ）を一切受け取らず、呼び出し時にはそれまでに書き込まれたすべてのデータが表示された状態でストリームが閉じられます。close()メソッドの構文HTML DOMのclose()メソッドの構文は以下の通りです。document.close()close()メソッドの使用例ここでは、ボタンをクリックすると出力ストリームを開き、テキストを書き込んだ後、最後にストリームを閉じるサンプルを見てみましょう。&l

HTML DOM CodeオブジェクトとはHTML DOMのCodeオブジェクトは、HTML5の<code>タグに関連付けられたオブジェクトです。<code>要素でコード部分を囲むことで、プログラムコードをマークアップするために使用されます。Codeオブジェクトは、基本的に<code>要素そのものを表します。構文Codeオブジェクトの構文は以下のとおりです。Codeオブジェクトの作成var a = document.createElement("CODE");サンプルコードHTML DOM Codeオブジェクトの使用例を見てみましょう。ボ

HTML DOMのボタンのvalueプロパティは、<button>要素のvalue属性に関連付けられたプロパティです。このプロパティは、ユーザーには見えない「隠し値」をボタンに持たせるために使用されます。valueプロパティを使うことで、ボタンのvalue属性の値を読み取ったり、新しい値を設定したりすることができます。なお、フォーム送信時の挙動はブラウザによって異なります。多くのブラウザはクリックされたボタンのvalue属性の値を送信しますが、一部のブラウザでは<button>要素内のテキスト（表示されている文字列）を送信する場合があるため、注意が必要です。構文valu

HTML DOMのcancelableイベントプロパティとはHTML DOMのcancelableイベントプロパティは、JavaScriptが反応できるHTMLイベントに関連付けられたプロパティです。このプロパティは、そのイベントがキャンセル（取り消し）可能かどうかを示すブール値（true または false）を返します。例えば、click イベントのように preventDefault() メソッドでデフォルト動作を阻止できるイベントは true を返しますが、マウスオーバーのようにキャンセルできないイベントは false を返します。構文cancelableイベントプロパティの構文は以下の

HTML DOM Canvasオブジェクトは、HTML5で導入された<canvas>要素に関連付けられたオブジェクトです。<canvas>タグは、JavaScriptを使ってグラフィックを描画するためのもので、描画領域（コンテナ）として機能します。Canvas上では、線や円、矩形など、さまざまな図形を自由に描くことができます。 Canvasオブジェクトの主なプロパティ Canvasオブジェクトには、以下のようなプロパティが用意されています。 プロパティ説明 fillStyle図形の塗りつぶしに使用する色・グラデーション・パターンを設定または取得します。 st

HTML DOM の Caption オブジェクトは、HTML の <caption> 要素に関連付けられたオブジェクトです。<caption> 要素は、テーブル（表）にキャプション（タイトル）を設定するために使用され、必ずテーブルの最初の子要素として配置する必要があります。Caption オブジェクトを利用することで、JavaScript から caption 要素へアクセスしたり、動的に生成したりすることが可能になります。プロパティ注意：以下のプロパティは HTML5 ではサポートされていません。HTML DOM Caption オブジェクトのプロパティは次のとおり

HTML DOMのcharacterSetプロパティは、<meta>要素のcharset属性に関連付けられた文字セット（文字エンコーディング）を表します。HTMLドキュメントの既定の文字セットはUTF-8です。characterSetプロパティは、そのHTMLドキュメントで使用されている文字エンコーディングを文字列として返します。Webページの既定の文字セットは、HTML側のcharset属性やDOMの設定によって上書きすることも可能です。構文characterSetプロパティの構文は次のとおりです。document.characterSetサンプルコードそれでは、HTML DOM

HTML DOMのchildElementCountプロパティは、指定した要素が持つ子要素の数を返す読み取り専用のプロパティです。戻り値の型はunsigned long（符号なし整数）です。このプロパティは、HTML文書全体の子ノードをすべて返すわけではなく、あくまでプロパティを呼び出したノード直下の子要素のみをカウントします。テキストノードやコメントノードはカウントの対象にならない点にも注意してください。 構文 childElementCountプロパティの構文は以下の通りです。 node.childElementCount サンプルコード それでは、HTML DOMのchildEle

HTML DOMのchildNodesプロパティは、あるノードが持つすべての子ノードのコレクションを、NodeListオブジェクトの形式で返します。返されるノードは、HTMLドキュメント内に出現する順序どおりに並んでおり、0から始まるインデックス番号を使って個々のノードへアクセスできます。このプロパティは読み取り専用です。特に注意したいのは、テキスト中の空白（ホワイトスペース）やコメントも1つのノードとしてカウントされるという点です。意図しないノードが含まれる原因になるため、実務でもよくつまずくポイントといえます。childNodesプロパティの構文childNodesプロパティの基本構文は以

HTML DOMのchildrenプロパティは、指定した要素が持つすべての子要素（child elements）をHTMLCollectionの形式で取得するためのプロパティです。このプロパティは読み取り専用であり、取得した要素には0から始まるインデックス番号を使ってアクセスできます。childrenプロパティで取得される要素は、HTMLドキュメント内に記述されている順序と同じ順序で並びます。また、類似のchildNodesプロパティと異なり、空白（テキストノード）やコメントノードは含まれず、要素ノードのみが返される点が大きな特徴です。childrenプロパティの構文childrenプロパティ

HTML DOMのciteオブジェクトは、HTMLの<cite>要素に関連付けられたオブジェクトです。<cite>要素は、引用した創作物への参照（出典）を示すために使用され、作品名を必ず含める必要があります。参照できる創作物は、絵画、書籍、テレビ番組、映画など多岐にわたります。 構文 citeオブジェクトを作成する構文は以下の通りです。 var x = document.createElement(CITE); サンプルコード それでは、HTML DOM citeオブジェクトの具体的な使用例を見ていきましょう。 <!DOCTYPE html> <h

HTML DOMのclassListプロパティは、HTML要素に関連付けられたクラス名を取得するためのプロパティです。戻り値はDOMTokenListという形式で、これは空白区切りのトークンの集合を表します。classListプロパティを利用すると、要素に対するCSSクラスの追加・削除・切り替え（トグル）を簡単に行うことができます。classListプロパティ自体は読み取り専用ですが、add()メソッドやremove()メソッドを使うことで、要素のクラスを追加・削除できます。classListのプロパティclassListには以下のプロパティがあります。プロパティ説明lengthリストに含まれ

HTML DOMのblur()メソッドは、特定の要素からキーボードフォーカスを解除するために使用されるメソッドです。blur()を活用することで、任意のHTML要素に対してフォーカスを与えたり、逆にフォーカスを外したりすることができます。ユーザーの操作に応じて特定の要素へフォーカスを柔軟に制御できるため、Webページ内のナビゲーションやアクセシビリティの向上にも役立ちます。 構文（シンタックス） blur()メソッドの基本的な構文は以下の通りです。 Object.blur() 対象となる要素オブジェクトに対してblur()を呼び出すだけで、その要素が持つフォーカスを解除できます。引数は不要で、

HTML DOM Bodyオブジェクトの概要HTML DOM Bodyオブジェクトは、HTMLの<body>要素に関連付けられたオブジェクトです。bodyタグ内に設定された属性とその値は、子ノードによって上書きされない限り、HTMLドキュメント全体にわたって保持されます。Bodyオブジェクトを使用することで、これらのプロパティやその値へアクセスし、操作することができます。Bodyオブジェクトの主なプロパティ以下は、HTML DOM Bodyオブジェクトが持つ主なプロパティの一覧です。注意： 以下のプロパティはHTML5ではサポートされていません。代わりにCSSを使用することが推奨さ

HTML DOMのbodyプロパティは、HTMLの<body>要素に関連付けられたプロパティで、<body>要素のプロパティ値を設定または取得するために使用されます。このプロパティは<body>要素そのものを返し、JavaScriptから要素内のコンテンツを動的に変更することができます。また、<body>要素内に存在する子要素の内容を丸ごと上書き（置き換え）することも可能です。 構文 bodyプロパティを設定する場合の構文は以下のとおりです。 document.body = New_Content ここで、New_Content は<b

HTML DOMの太字オブジェクトとはHTML DOMの太字（Bold）オブジェクトは、HTMLの<b>タグ（太字タグ）に関連付けられたオブジェクトです。<b>タグは、タグで囲まれたテキストを太字で表示するために使用されます。この太字オブジェクトを利用することで、JavaScriptからHTMLの<b>要素にアクセスし、動的に生成・操作することが可能になります。構文太字オブジェクトを作成するための基本的な構文は以下のとおりです。太字オブジェクトの作成var x = document.createElement(B);document.createElemen