要素の取得

JavaScript。
最近はDOMとかAjaxとかそんな単語も出てきて、昔よりも使えるメソッドが増えてきて正直何がDOMで何がアレなのか分かってないのですが(^^;)
いつかちゃんと勉強したいとは思うんですが、まぁいつかなんて日はいつだ!て突っ込まれたら笑うしかない汚いオトナです。オトナはすぐに「いつか」なんて言っちゃうよ!

で、そんなことを言うほどいい加減な割に私はJavaScriptが好きです。
お手軽なので。簡単、という意味ではなくて、テキストエディタがあってブラウザがあれば動かせるじゃないですか。TomcatもIISもなーも要らない訳で、そういうトコが好きなのです。
暇潰しにロジック組んでみる、とかに最適。

最近仕事でよく使う(羽目に陥っている)んですが、
名前指定して要素にアクセスする、という辺りで色々と。
昔はそれこそ要素名が動的だったりすると
■obj = eval("document.forms[0]." + strObjNm);
なんてやってたんですが、最近ではとんと見かけなくなりましたね、eval。
以降、elementsなんて使ってたりもしました。
■obj = document.elements(strObjNm);
これはまだ見かけるかなあ。んで、最近出てきた(存在に私が気付いた、が正しい)のが、
■getElementsByName("xxxx")
 <INPUT type="text" name="xxxx">
 nameアトリビュートを指定してエレメントを取得。
■getElementById("yyyy")
 <INPUT type="text" name="xxxx" id="yyyy">
 idアトリビュートを指定してエレメントを取得。
■getElementsByTagName("INPUT")
 <INPUT type="text" name="xxxx" id="yyyy">
 INPUTを指定してエレメントを取得。
IDは、1ページ内で重複して付けるのは×なので、それだけElement。それ以外は複数存在するのでElementsとなって、こちらは配列で取得されます。
これらはそれぞれdocumentノードに対して呼ばれるのが普通ですが、elementのメソッドとしても存在するので、elementからでも使用することが出来ます。

…で、使ってみた感想。
hiddenやら<SPAN id="XXXX">やらがやたらある画面で、動的な要素名で何か取得する場合、getElementByIdが一番早いと思いました。
idが指定されているelementが少ないから??
中でどういう動きをしているのか分からないのですが、体感速度ではダントツだったです。
ただ、今やっているのがstruts->jsp使用なのですが、カスタムタグ部分が共通チームの管轄になっていて手が出せず、なので、勝手にID名とかをhidden項目とかにくっつけられなくて、hiddenオブジェクトの取得の時とかにgetElementByIdが使用できない……orz
<SPAN>タグとかには付いてるのにー。

てことで、カスタムタグじゃない<TABLE>タグなんかにIDくっつけて、ノード(という表現であっているのか…)取得、そのノードに対してgetElementsByTagNameやgetElementsByNameかます、という方法で検索範囲を限定して速度出してます。

とりあえず備忘録含めたまとめ。

参考にしたページ。
http://developer.mozilla.org/ja/docs/DOM:document.getElementsByTagName
http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05/002/index.html

| | コメント (0) | トラックバック (0)

onBeforeUnload 追記

これ結局解決していない問題なのですが。。。

onBeforeUnload で確認ダイアログを表示させる場合。

submit() やら history.back() なんかをファンクションの中から呼んでいる場合に、ダイアログでキャンセルボタンを押下するとエラーが発生します。

どうも、直前に呼んでいたファンクションに戻ろうとしているんだけど、それを見失っているような感じ。ファンクションの宣言部分でエラーがあるとJavaScript様はおっしゃいます。

普通に、×ボタン押下だったり、戻るボタン押下だったりの場合ではエラーは発生しません。

一応調べたんですが結論が出なかったため(爆)、仕方なく二段構えでいくことにしました。

onBeforeUnload は、×ボタン押下などの場合に使用、登録ボタンなどのようにファンクションを呼び出して入力チェックなどをしてからsubmit() 、などの場合は、そのファンクション内でonBeforeUnload 時に表示するダイアログと全く同じダイアログを表示して誤魔化す。

……ネット上にこれに関する記事が見つけられなかったんですが、onBeforeUnload ってあんまりこういう使い方しないもんなんでしょうか……orz

| | コメント (2) | トラックバック (0)

onBeforeUnload の挙動について

画面がUnloadされる前に発生するイベント。
ちなみに onLoad は画面が表示された時(表示完了時)、onUnload は画面がUnload(画面遷移、×ボタン押下など)された時。Unloadされた時、なので画面自体はもう落ちて(遷移して)います。
画面遷移する前、または落ちるに何かしたい場合に、onBeforeUnload イベントを指定します。
よくあるのが、登録画面などで「登録してないけど遷移していいの?」的な確認でしょうか。

記述方法は
<BODY onBeforeUnload="XXXX">
で、XXXXには javaScript のファンクション名か、または javascript:alert("test"); などの様に直接スクリプトを記述します。
指定するファンクションの内容は、特に制限はありません。
また、onSubmit などと同様、return 値を受け取ることも可能。
<BODY onBeforeUnload="return XXXX">
但し、onSubmit などのように、boolean型 を受け取ることは出来ません。
onBeforeUnload で返される値は常に文字列として扱われ、その文字列は、画面遷移をしていいかどうかをユーザに確認するダイアログ内でメッセージとして使用されます。
<表示例>
「このページからほかのページに移動しますか?」
++++ここに戻り値である文字列を表示++++
「続行するには[OK]をクリックし、現在のページから移動しない場合は[キャンセル] をクリックしてください。」

false を返しても、ダイアログ内で false と表示されるだけです。
※false を返したからといって画面遷移や画面が閉じられるのをキャンセルできてしまっては、セキュリティ上問題がありますからね。。。セキュリティというか、動作としてはウィルスと同じようなものになってしまいます。

return で文字列を返さなければ、上記のダイアログは表示されません。記述された処理が終わればそのまま画面は落ちます。

ちなみにIE限定機能のようです。NNでは動かないとのこと。FireFoxなんかではどうなんでしょう。。未検証ですが。

| | コメント (0) | トラックバック (0)

その他のカテゴリー

EXCEL | Flash | Java | JavaScript | oracle | perl | Shell | おすすめサイト | 小ネタ