以下のURLに記載している内容なのですが

http://q.hatena.ne.jp/1179995257
この処理をTagNameを使用せずに
出来るのでしょうか?

回答の条件
  • 1人5回まで
  • 登録:2007/05/28 11:19:01
  • 終了:2007/06/04 11:20:02

回答(4件)

id:jack_sonic No.1

じゃっくそにっく回答回数123ベストアンサー獲得回数252007/05/29 22:29:55

ポイント23pt

tagNameプロパティを使わずに

テキスト内容をvalueに代入すべきタグか、innerHTMLに代入すべきタグかを判断するもの

(valueプロパティがあるものは、そちらを優先する)というロジックは、

プロパティが定義されていないときに、

JavaScriptでは初期値がundefinedになる点に注目し、

  • .valueプロパティが定義されている(obj.value != undefined)のオブジェクトならvalueプロパティに代入
  • .valueプロパティが定義されていない(obj.value == undefined)のオブジェクトならinnerHTMLに代入

というロジックを使うと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)

id:hopefully

ありがとうございます。

2007/05/30 12:20:22
id:smeghead No.2

smeghead回答回数11ベストアンサー獲得回数02007/05/29 20:52:08

ポイント23pt

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';
id:hopefully

これは<span>だとダメと言うことでしょうか?

2007/05/30 12:20:58
id:smeghead No.3

smeghead回答回数11ベストアンサー獲得回数02007/05/30 13:19:02

ポイント22pt

これは<span>だとダメと言うことでしょうか?

いえ。特殊な条件の元では動作しないということを、言ったつもりでした。span(div)タグには初期状態でvalueプロパティが存在しないことを前提とした判定方法を使っていますので、span(div)タグに無理矢理valueプロパティを追加してしまうと、その後、判定が正しく動かなくなります。という意味です。

勿論、span(div)タグなどのエレメントのvalueプロパティに値を保存するようなコードを書かないようにすれば、問題は発生しません。


javascriptでは、オブジェクトに存在しないプロパティに値を設定すると、プロパティが追加されて値が保存されるという動作になります。


jack_sonicさんの判定方法も基本的に同じですので、同様の現象は発生すると思います。

id:hopefully

これだとinnnertHTMLかvalueしかわけてないのですが他の項目ってなにかありますかね?

2007/05/30 17:45:29
id:smeghead No.4

smeghead回答回数11ベストアンサー獲得回数02007/05/30 22:52:04

ポイント22pt

連続ですいません。

これだとinnnertHTMLかvalueしかわけてないのですが他の項目ってなにかありますかね?

IEのみの属性はいろいろあるようです(isTextEditなど)が、ちょっと見てみたところ一般的に使えそうなものは見つかりませんでした。

tagNameプロパティがReadOnlyのようですので、tagNameプロパティによる判定が一番安全と思います。(つまり最初の方法です)

http://www.red.oit-net.jp/tatsuya/java/reference/body.htm

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません