tagNameプロパティを使わずに
テキスト内容をvalueに代入すべきタグか、innerHTMLに代入すべきタグかを判断するもの
(valueプロパティがあるものは、そちらを優先する)というロジックは、
プロパティが定義されていないときに、
JavaScriptでは初期値がundefinedになる点に注目し、
というロジックを使うとtagNameを使わないで判断できます。
(DIV,Inputタグについて、
InternetExplorer7,firefox2.0,Opera9.21で動作確認済み )
ソースコード
<html><head><title>valueの判定</title></head><body> <div id="tag1">ディブ1</div> <form> <input id="tag2" type="button" value="ボタン"> <input id="tag3" type="text" value=""> <input type="button" value="代入する" onClick="testAssign()"> </form> <div id="tag4">ディブ4</div> <script type="text/javascript"> <!-- ///////////////////////////////////////////////// // setText: オブジェクトによって // valueかinnerHTMLか判断して代入する関数 // 引数obj : オブジェクト //text:セットする内容 function setText(obj,text) { // .valueプロパティが定義されている // (obj.value != undefined) のオブジェクトなら // .valueプロパティに代入 // .valueプロパティが定義されていない // (obj.value == undefined)のオブジェクトなら // .innerHTMLに代入 // valueプロパティが定義されているかどうか alert( "id=" + obj.id + " " + obj.tagName + ":\n" + ".value=" + obj.value); if( obj.value != undefined ) { // .valueに代入 obj.value = text; }else{ // .innerHTMLに代入 obj.innerHTML = text; } } // 呼び出しサンプル function testAssign() { setText(document.getElementById("tag1"), "div1に入れる内容"); setText(document.getElementById("tag2"), "input buttonに入れる内容"); setText(document.getElementById("tag3"), "input textに入れる内容"); setText(document.getElementById("tag4"), "div4に入れる内容"); } //--> </script> </body></html>
何か新しい変更があればこちらに書きます。
JavaScript/タグの種類を判別して内容を代入 - 情報処理研究所 ジャックズラボ(jack's Lab)
ありがとうございます。
tagNameを使用せずに処理を行なうというのは汎用的にするのが目的なのでしょうか?
前の私の例の中のsetValueAuto関数を以下のように変更すれば、可能といえば可能です。
http://q.hatena.ne.jp/1179995257
//idで指定されたエレメントの値を設定する。 function setValueAuto(id, value) { var element = document.getElementById(id); if (!element) return; if ("value" in element) { element.value = value; } else { element.innerHTML = value; } }
エレメントにvalueプロパティが存在しているかどうかを元に判定を行なうようにしました。
ただ、javascriptはプロパティの定義は自由なので、下のような悪戯をすると動かなくなります。
document.getElementById('spanタグのid').value = 'xxx';
これは<span>だとダメと言うことでしょうか?
これは<span>だとダメと言うことでしょうか?
いえ。特殊な条件の元では動作しないということを、言ったつもりでした。span(div)タグには初期状態でvalueプロパティが存在しないことを前提とした判定方法を使っていますので、span(div)タグに無理矢理valueプロパティを追加してしまうと、その後、判定が正しく動かなくなります。という意味です。
勿論、span(div)タグなどのエレメントのvalueプロパティに値を保存するようなコードを書かないようにすれば、問題は発生しません。
javascriptでは、オブジェクトに存在しないプロパティに値を設定すると、プロパティが追加されて値が保存されるという動作になります。
jack_sonicさんの判定方法も基本的に同じですので、同様の現象は発生すると思います。
これだとinnnertHTMLかvalueしかわけてないのですが他の項目ってなにかありますかね?
連続ですいません。
これだとinnnertHTMLかvalueしかわけてないのですが他の項目ってなにかありますかね?
IEのみの属性はいろいろあるようです(isTextEditなど)が、ちょっと見てみたところ一般的に使えそうなものは見つかりませんでした。
tagNameプロパティがReadOnlyのようですので、tagNameプロパティによる判定が一番安全と思います。(つまり最初の方法です)