いくつかの一般的な参照方法と、最近知った id をそのまま使う方法(IE以外)と、jQuery を使った参照です
▼ jQuery
<script>
if ( !window.jQuery ) {
if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
if ( window.addEventListener ) {
window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
}
else {
window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
}
}
document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<form name="frm">
<input type="text" id="fld_id" name="fld_name" value="ABC">
</form>
<input type="button" value="FORM参照" onclick='alert(frm.fld_name.value)'>
<input type="button" value="IE以外で簡易id参照" onclick='alert(fld_id.value)'>
<input type="button" value="id参照" onclick='alert(document.getElementById("fld_id").value)'>
<input type="button" value="name参照" onclick='alert(document.getElementsByName("fld_name")[0].value)'>
<input type="button" value="tag参照" onclick='alert(document.getElementsByTagName("input")[0].value)'>
<br>
<br>▼ jQuery<br>
<input type="button" value="jQuery参照" onclick='alert($("#fld_id").val())'>
<input type="button" value="jQueryのDOM参照1" onclick='alert($("#fld_id").get(0).value)'>
<input type="button" value="jQueryのDOM参照2" onclick='alert($("#fld_id")[0].value)'>
tag 参照は、同じ要素が複数あるページでは先頭以外でうまくいきません。このページでは実際には以下のように記述しています
alert(document.getElementsByName("frm")[0].getElementsByTagName("input")[0].value)
目的の要素を含む要素で確定させておいて、その中の同じ要素の何番目かという選択をします
|
|
【JavaScript DOMの最新記事】
- IFRAME 内に外部の javascript を読み込んで画面を作成する / document.write での構築
- JavaScript : setTimeout の第一引数の正しい書き方。
- JavaScript でクリックの代替( 古くは dispatchEvent で呼び出し )、現在は jQuery の click() ではリンクの URL を開く事はでき無いので、$("セレクタ")..
- JavaScript : リンクから _blank で開いたページを JavaScript で閉じる場合の動作テスト
- JavaScript : ブラウザの表示を半透明で暗くする方法( scrollHeight で高さ決定 )
- JavaScript : リンクのテキストの取得( Chrome、Firefox、IE / textContent、innerText、text、replace、jQuery )
- 動的に作成された IFRAME の キャラクタセットのブラウザ別の違い
- ローカル記憶域 : window.localStorage
- JavaScript : zIndex の最大値と思われる 0x7FFFFFFF を各ブラウザでテストしました
- JavaSctipt : ユーザ用(名前空間付き)イベント追加メソッドの作成
- JavaScript : 最後にクリックしたテキストフィールドを保存する
- JavaScript : クリックした要素の位置を計算して、近くにウインドウを開く
