タグ: ドキュメントの制御

HTMLフォームやJavaScriptプログラムで最もよく使われる要素
ユーザが入力したテキストは、valueプロパティに格納される。
valueプロパティに値を設定すれば、テキストフィールドに表示される文字を変更できる。

placeholder属性を使って、ユーザが入力する前にテキスト入力フィールドに表示するテキストを指定できる。

Arrival Data: <input type="text" name="arrival" placeholder="yyyy-mm-dd">

ユーザが新しいテキストを入力したり、テキストを編集したしした後、テキストフィールドから別の要素に
入力フォーカスを移動したときにonchangeイベントハンドラが呼び出される。

Textarea要素はテキスト入力フィールド要素に似ている。
ただ、ユーザが複数行のテキストを入力できる点が異なる。
JavaScriptプログラムからも複数行のテキストが表示できる。
<textarea>タグを使って作成する。

Text要素、Textarea要素はvalueプロパティやonchangeイベントハンドラが使える

<input type="password">要素

テキスト入力フィールドを少し変更したもの。

ユーザがテキスト入力したときにアスタリスク(*)が表示される。

ユーザがパスワードを入力するときに便利。フォームの送信時に、内容が暗号化されるわけではない。

<input type"file">要素

Webサーバにアップロードするファイル名をユーザが入力するための要素

この要素は、テキストフィールドにファイル選択ダイアログをオープンするボタンを追加したもの。

参考書籍：

オライリー JavaScript 第6版

チェックボックス要素とラジオボタン要素はトグルボタンです。
つまり、見た目が異なる2つの状態を持つ。

ラジオボタン要素は、関連する要素を1つのグループにまとめるために使う。
これらの要素は、HTMLのname造成として同じ値を持つ。
ラジオボタン要素は排他的な動作をする。
1つをクリックすると、以前にチェックされていたボタンはチェックが外される。

チェックボックスもname属性が同じ値の要素を1つのグループにまとめるために使う。
このname属性をフォームのプロパティ名として使って、
これらの要素を選択したときは、1つの要素が取得できるのではなく、配列のようなオブジェクトが取得できる。

ラジオボタンとチェックボックス要素には、checkedプロパティが定義されている。
このプロパティには、読み書き可能な論理値が格納され、
要素が現在チェックされているかどうかを示す。

defaultCheckedプロパティには、HTMLのchecked属性の値を示す論理値が格納されている。
この値はページがロードされた時点で、この要素がチェックされていたかどうかを示す。

ラジオボタンやチェックボックス要素自体は、テキストを表示しない。
一般的には、隣接するHTMLがテキストを表示する。
つまり、チェックボックスやラジオボタン要素のvalueプロパティｗｐ設定しても、
要素の見た目は変更できない。
valueに設定した値は、フォーム送信時にWebサーバに送られる文字が変更されるだけ。

参考書籍：

オライリー JavaScript 第6版

フォーム要素で広く使われる。
ボタン要素自体はデフォルトの振る舞いを持たないので、
onclickなどのイベントハンドラが設定されていない場合は意味がない。
<input>要素で定義されたボタンは、value属性のテキストをボタン中に表示する。
<button>要素で定義されたボタンは、要素のコンテンツをボタン中に表示する ボタンと同様、ハイパーリンクもonclickイベントハンドラを持つ。 Submit要素とReset要素は、ボタンとほぼ同じですが、デフォルトの処理を持つ点が異なる。
Submit要素はデフォルトで、フォームの送信を行う。
Reset要素はデフォルトで、フォームのリセットを行う。
onclickイベントハンドラがfalseを返せば、これらのボタンのデフォルトの処理は実行されない。

参考書籍：

オライリー JavaScript 第6版

Form要素には、フォームの送信を検出するonsubmitイベントハンドラがある。
また、フォームのリセットを検出するonresetイベントハンドラもある

onsubmitイベントハンドラ
フォームを送る前にonresetイベントハンドラが呼び出される。
このイベントハンドラがfalseを返せば、フォームの送信を取り消せる。

onresetイベントハンドラ
フォームがリセットされる前にonresetイベントハンドラが呼び出される。
このイベントハンドラがfalseを返せば、フォームのリセットを取り消せる。

一般的に、ユーザがフォーム要素を操作したときに、
フォーム要素は、クリックイベント、あたはチェンジイベントを発生する。
onclickイベントハンドラ、onchangeイベントハンドラを定義することで、これらのイベントを処理できる

一般的に、ボタンになるフォーム要素は、ボタンが押されたときにクリックイベントを発生させる。
マウスクリック、キーボードを使って操作した場合のどちらでもクリックイベントが発生する。

そのほかのフォーム要素では、ユーザがフォーム要素の値を変更したときに、チェンジイベントが発生する。
例えば、テキストフィールドにユーザがテキストを入力したり、ドロップダウンリストの選択肢を選択したりしたときに発生する。
なお、ユーザがテキストフィールドでキーを押すたびに、イベントが発生する訳ではなく、
イベントハンドラが呼び出されるのは、ユーザが要素の値を変更した後、入力フォーカスを別のフォーム要素に移動した時だけ発生する。

ラジオボタンとチェックボックスは、状態を持つボタン。
このため、クリックイベントとチェンジイベントの両方が発生するが、チェンジイベントの方が便利。

フォーム要素は、入力フォーカスが移動してきたときに、focusイベントを発生させる。
反対に、入力フォーカスを失ったときに、blurイベントを発生させる。

イベントハンドラ中のコードでのthisキーワードはイベントが発生したドキュメント要素を参照する。
form要素中のフォーム要素は、formプロパティを持つ。
したがって、this.formという形式で、フォームオブジェクトを参照できる。

参考書籍：

オライリー JavaScript 第6版

Formオブジェクトの重要なプロパティ
elements[]
action
encoding
method
target
form要素の属性にそれぞれ対応する。

JavaScriptのFormオブジェクト
submit()メソッド
ユーザがSubmitボタンをクリックしたのとまったく同じ効果が得られる

reset()メソッド
ユーザがResetボタンをクリックしたのとまったく同じ効果が得られる

Formオブジェクトの共通プロパティ
type
読み出し専用の文字列で、フォームの種類を表す
inputタグで定義されるフォーム要素の場合は単にtype属性と同じ値になる

form
フォーム要素が含まれるFormオブジェクトの参照が格納される
フォーム要素が中に含まれない場合、nullが格納される。
読み出し専用

name
読み出し専用の文字列で、HTMLのname属性で指定された文字列を格納する

value
読み書き可能な文字列で、フォーム要素の値を格納する
フォームを送信するときに、Webサーバに送られるのが、この文字列

参考書籍：

オライリー JavaScript 第6版

var fields = document.getElementById("address").getElementsByTagName("input");

// shipping というIDのフォーム中のすべてのラジオボタン
document.querySelectorAll('#shipping input[type="radio"]');

// shipping というIDのフォーム中の「method」という名前のラジオボタン
document.querySelectorAll('#shipping input[type="radio"][name="method"]');

window.address 		//不安定 使わないようにする
document.address 		//name属性を持つフォームでのみ動く
document.forms.address 		//nameまたはidを使って、明示的にフォームにアクセスする
document.forms[n] 		//不安定 nはフォームの数値上の位置

document.forms.address[0] 		//
document.forms.address.street 		//
document.address.street 		//

document.forms.address.elements[0] 		//
document.forms.address.elements.street 		//

	<form name="shipping">
		<fieldset><legend>Shipping Method</legend>
			<label><input type="radio" name="method" value="1st">First-class</label>
			<label><input type="radio" name="method" value="2day">2-day Air</label>
			<label><input type="radio" name="method" value="overnight">Overnight</label>
		</fieldset>
	</form>

	var methods = document.forms.shipping.elements.method;
	
	
	var shipping_method;
	for(var i=0; i < methods.length; i++)
		if(methods[i].checked) shipping_method = methods[i].value;

参考書籍：

オライリー JavaScript 第6版

要素の大きさを取得する
HTML要素の読み出し専用プロパティ
offsetWidthプロパティ
offsetHeightプロパティ
ボーダー、パディングは含まれる、マージンは含まれない。

すべてのHTML要素には、
offsetLefプロパティ
offsetTopプロパティ
がある。

offsetParent

参考書籍：

オライリー JavaScript 第6版

windowオブジェクトのscrollTo()（別名scroll()）メソッド
スクロール位置を設定する
ドキュメント座標で指定

windowオブジェクトのscrollBy()

数値を指定してドキュメントをスクロールさせるのではなく、ドキュメント中のある要素が見えるようにスクロールさせたい場合がある。

scrollIntoView()メソッド
window.location.hashにアンカーの名前を設定したのと同じような振る舞いになる

参考書籍：

オライリー JavaScript 第6版

DocumentオブジェクトのelementFromPoint()メソッド
ビューポート中のある場所の要素が何かを取得したい場合

参考書籍：

オライリー JavaScript 第6版

getBoundingClientRect()メソッド
要素の大きさや位置を取得する
メソッドからは、
left、right、top、bottomプロパティを持つオブジェクトが返される。
このメソッドが返すのは、ビューポート座標での要素位置。
ドキュメント座標に変換するときは、ユーザがブラウザウィンドウをスクロールした場合でも
正しい値になるように、スクロール量を加算する。

var box = e.getBoundingRect();      //ビューポート座標で位置を取得する
var offsets = getScrollofset();     //ウィンドウのスクロールバーの位置を取得するユーティリティ関数(例15-8)
var x = box.left + offsets.x;       //ドキュメント座標に変換する
var y = box.top + offsets.y;

要素のボーダーやパディングが含まれる。マージンは含まれない。

getClientRects()
インライン要素の個々の矩形について調べたい場合
このメソッドからは、読み出し専用の配列のようなオブジェクトが返される。

参考書籍：

オライリー JavaScript 第6版