以下のURLに記載している内容なのですが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ﾌﾟﾛﾊﾟﾃｨによる判定が一番安全と思います｡(つまり最初の方法です)
