S-JIS[2005-01-29/2007-08-12] 変更履歴

Javaスクリプトで扱うタグのオブジェクト

タグオブジェクトのプロパティ
プロパティ 内容 更新日
tagName タグ名  
innerHTML そのタグのボディ部に入っているHTML  
outerHTML そのタグ(及びボディ部)そのもののHTML 2005-03-31
属性名 nameやtypeやidやstyleなど、そのタグに付いている属性の名前で値の取得・設定ができる。 2005-03-31

そのオブジェクトがどんなプロパティーを持っているのかは、以下のようなJavaScriptを実行すれば知ることが出来る。[2007-03-21]

var s = '';
for(var i in タグオブジェクト) { s += i + '\n'; }
confirm(s);

通常のコーディング方法

タグ Javaスクリプト内 更新日
form <form name="form_name"> var obj=form_name;
var obj=document.form["form_name"];
var obj=document.form[0];
var obj=document.forms(0);
2007-08-12
div <div id="div_id"> var obj=div_id;
var obj=document.getElementById("div_id");
var obj=eval("div_id");
2005-03-31
span <span id="span_id"> 同上
var obj=span_id;
2005-03-27
td <td id="td_id"> 同上
var obj=td_id;
2005-03-31
input <input name="input_name"> var obj=document.form_name.input_name;
var obj=form_name.input_name;
 

IDと名前がかぶっている場合、その名前でオブジェクトを取得しようとすると配列になってしまうので要注意。[2007-03-21]
例えば<a name="zzz">と<div id="zzz">という順でタグが在る場合、JavaScript内ではzzzというオブジェクト(変数)は【要素が2個の配列】となり、zzz[0]がaタグ、zzz[1]がdivタグとなる。


タグオブジェクトを取得する方法

取得方法 説明
名前 タグに付いているIDや名前を直接(変数の様に)使用すると、そのオブジェクトになる。[2007-03-21]
たぶんevalと同等。オブジェクトが存在しない場合はグローバル変数と同じ扱いになるだろう。
document.getElementById(IDの文字列) タグに付いているID(id属性)で検索し、タグオブジェクトを返す。
IDの付いているタグが見つからなかった場合、nullが返る。
同じIDが複数のタグに付いている場合、最初に見つかったものが返るっぽい
document.getElementsByName(名前の文字列) タグに付いている名前(name属性)で検索し、タグオブジェクトの配列を返す。
ただしname属性が有効なタグでないと検索できない模様。
戻り値は配列なので、1つも見つからなければ空の配列だし、複数見つかれば全てが入る。
document.getElementsByTagName(タグの文字列) タグ名で検索し、タグオブジェクトの配列を返す。
eval(名前の文字列) Javaスクリプト内に記述(コーディング)する式を文字列として渡して評価(evaluate)することにより、オブジェクトを取得。
オブジェクトが存在しない場合、「'オブジェクト'は宣言されていません。」というJavaスクリプトエラーが発生する。

実験

<form name="form_name" id="form_id">
  <div name="div_name" id="div_id">
    <table name="table_name" id="table_id">
      <tr>
      <td><input type="text" name="text_name" id="text_id" value="hoge"></td>
      <td><input type="radio" name="radio_name" id="radio_id" checked>ラジオ1<br>
          <input type="radio" name="radio_name" id="radio_id">ラジオ2</td>
      </tr>
    </table>
  </div>
</form>
ラジオ1
ラジオ2

 

名前で検索 IDで取得 タグ名で検索 evalで取得
 
×  
×  
× ×



最初の1つだけ
× ×
複数あるときは、タグオブジェクトの配列が返る
× ×  

○:タグオブジェクトが取れる。△:取れないが、エラーにはならない。×:JavaScriptがエラーを起こす。


JavaScriptへ戻る / 技術メモへ戻る
メールの送信先:ひしだま