人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

以下のURLに記載している内容なのですが
http://q.hatena.ne.jp/1179995257
この処理をTagNameを使用せずに
出来るのでしょうか?


●質問者: hopefully
●カテゴリ:就職・転職 ウェブ制作
✍キーワード:URL
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● じゃっくそにっく
●23ポイント

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)

◎質問者からの返答

ありがとうございます。


2 ● smeghead
●23ポイント

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>だとダメと言うことでしょうか?


3 ● smeghead
●22ポイント

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

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

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


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


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

◎質問者からの返答

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


4 ● smeghead
●22ポイント

連続ですいません。

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ