HTML要素とフォームに関するメソッド

ここに掲載する以外にも多くのメソッドが定義されているので、それらについてはAPIドキュメントなどを参照していただきたい。なお、実行画面はInternet Explorer 7で示す。

HTML要素(Element)の拡張メソッド

APIドキュメントには、HTMLの要素に関連するクラスとしてElement、Element.Methods、Element.Methods.Simulatedが掲載されているが、Elementでは他の2つで定義されているメソッドも拡張されているため、ここではElementのメソッドとして紹介する。

Elementのメソッドは $(...).メソッド名(引数) のように記述できるものが多い。しかしAPIドキュメントによると、一部のWebブラウザでは Element.メソッド名(引数) と記述しなければならないメソッドがあるようなので、注意していただきたい。

要素の作成 - new Element( タグ名, { 属性 : 値, ... } ).update( 子要素 );

Element自身のインスタンスによって新たな要素を作成できる。テキストなどの子要素を挿入するときは、上記のようにインスタンスに続けてupdate()で追加するとよい。

【例】 リンクを作成

new Element( 'a', { href : 'http://journal.mycom.co.jp/' } ).update( 'マイコミジャーナル' );

[作成される要素]
<a href="http://journal.mycom.co.jp/">マイコミジャーナル</a>

---

要素の追加/削除 - insert(追加) / remove(削除)
$( 'demo' ).insert( 要素 ); または Element.insert( 'demo', 要素 ); など
(*)insertでは、要素のところを { 追加する箇所 : 要素 } としてもよい

作成した要素を表示中のページに追加するにはinsertを実行する。これはバージョン1.6から追加されたものだ。

引数が要素のみのときは最後の子要素(bottom)として追加されるが、 { top : 要素 } とすれば、最初の子要素として追加される。直前の兄弟要素(before)や直後の兄弟要素(after)として追加することも可能だ。

【例】 <li>マイコミジャーナル</li>を追加

[実行前]
<ul id="demo">
  <li>Prototype.js</li>
  <li>Script.aculo.us</li>
</ul>

// bottomの場合
$( 'demo' ).insert( '<li>マイコミジャーナル</li>' );

[実行後]
<ul id="demo">
  <li>Prototype.js</li>
  <li>Script.aculo.us</li>
  <li>マイコミジャーナル</li>  ← ここに追加
</ul>

// topの場合
$( 'demo' ).insert( { top : '<li>マイコミジャーナル</li>' } );

[実行後]
<ul id="demo">
  <li>マイコミジャーナル</li>  ← ここに追加
  <li>Prototype.js</li>
  <li>Script.aculo.us</li>
</ul>

---

要素の表示/非表示 - show(表示) / hide(非表示) / toggle(交互)
状態の確認 - visible
$( 'demo' ).show(); または Element.show( 'demo' ); など

要素の表示/非表示は、これら3つのメソッドで行う。toggleは、要素が表示されていればhide()を、表示していなければshow()を実行する。要素が表示中であるかの確認はvisible()で行う。

【例】 ボタンのクリックで<div id="demo">の表示を切り替える

<p>
  <button onclick="$( 'demo' ).show();">show(表示)</button>
  <button onclick="$( 'demo' ).hide();">hide(非表示)</button>
  <button onclick="$( 'demo' ).toggle();">toggle(交互)</button>
</p>
<div id="demo">いまからはじめるPrototype.js</div>

---

class属性の追加/削除 - addClassName(追加) / removeClassName(削除)
クラスの確認 - hasClassName
$( 'demo' ).addClassName( 'aClass' ); または Element.addClassName( 'demo', 'aClass' );など

HTMLのclass属性は、空白で区切って複数の値を設定できるが、DOMではこれを1つの文字列として扱うので、1つのクラスだけを削除する場合は少々面倒だ。しかしremoveClassNameは1つのクラスだけを簡単に削除できる。

【例】 ボタンのクリックでクラスを追加/削除する

[対象となる要素]
<p>
  赤色
  <button onclick="$( 'demo' ).addClassName( 'red' );">追加</button>
  <button onclick="$( 'demo' ).removeClassName( 'red' );">削除</button><br>
  太字
  <button onclick="$( 'demo' ).addClassName( 'bold' );">追加</button>
  <button onclick="$( 'demo' ).removeClassName( 'bold' );">削除</button><br>
</p>
<div id="demo">いまからはじめるPrototype.js</div>

[CSSプロパティ]
.red   {  color       : red;   }
.bold  {  font-weight : bold;  }

フォーム(Form)に関するメソッド

フォームもHTML要素のうちではあるが、ユーザーからデータが入力されるなど、他の要素とは異なる特徴があるため、別のメソッドが定義されている。ここではそのうち2つを紹介する。

フォームの最初のフィールドにフォーカスする
$( 'demo' ).focusFirstElement();

ユーザーがデータを入力しやすくなるよう、フィールドにフォーカスを移す。ちょっとしたことだが、ユーザーへの配慮が求められるところだ。

---

フォームに入力されたデータを取得する
$( 'demo' ).serialize();

各フィールドごとのデータを取得する。日本語はUTF-8として変換される。ただし送信ボタン(submit)の値は取得しない。

デフォルトはURLパラメータ形式だが、引数に { hash : true } を記述するとオブジェクトで取得できる。このオブジェクトはObject.toJSON()でJSON形式に変換できる。ただ、以下の例で分かるとおり、これを実行した段階ではデータが平文なので、セキュリティを確保するために、データを暗号化したり、HTTPSによる通信を行ったりすべきだろう。

【例】 フォームのデータを取得する

[対象となる要素]
<form id="demo" action="javascript:void(0);" onsubmit="return false;"><div>
  ユーザー名<input type="text" name="user" /><br />
  パスワード<input type="password" name="pass" /><br />
  ユーザー名を保存する<input type="checkbox" value="true" name="save" /><br />
  <input type="submit" value="ログイン" />
  <input type="hidden" value="randomkey" name="key" />
</div></form>

このほかにも、要素の表示位置を取得するものや、子孫要素まで検索するものなど、多くのメソッドが定義されているので、上記と合わせて活用していただきたい。