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

javascriptで、DOMオブジェクトを読み込んで
そのidの記述しているタグが<DIV>とか<span>なら
innerHTMLに変換して、<input>タグなら
valueにするようなテクニックはあるのでしょうか?

●質問者: hopefully
●カテゴリ:就職・転職 ウェブ制作
✍キーワード:DOM JavaScript オブジェクト タグ 記述
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● aside
●25ポイント

var oDiv = document.getElementsByTagName("DIV");

var oSpan = document.getElementsByTagName("SPAN");

var oInput = document.getElementsByTagName("INPUT");

for (var idx = 0 ; idx < oDiv.length; idx++) {

alert(oDiv[idx].innerHTML);

}

for (var idx = 0 ; idx < oSpan.length; idx++) {

alert(oSpan[idx].innerHTML);

}

for (var idx = 0 ; idx < oInput.length; idx++) {

alert(oInput[idx].value);

}


でいけるぽ

◎質問者からの返答

納得です。ありがとうございます。


2 ● じゃっくそにっく
●30ポイント

このようにしてタグごとにinnerHTMLとvalueを切り替えることができます。

<html>
<body>
<!-- タグ -->
<div id="tag1">ディブ</div>
<input id="tag2" type="button" value="ボタン">

<script type="text/javascript">
<!--
/////////////////////////////////////////////////
// setText(obj,text) タグを考慮して内容をセットする関数
//obj : オブジェクト
//text:セットする内容
function setText(obj,text)
{
// タグの名前を取得
tagName = obj.tagName;
// 判断・振り分け
if( tagName.match(/DIV/i) )
{
obj.innerHTML = text;
}else if( tagName.match(/INPUT/i) ){
obj.value = text;
}
}

// 呼び出しサンプル
setText(document.getElementById("tag1"), "これはdivです");
setText(document.getElementById("tag2"), "これはinputです");
//-->
</script>
</body>
</html>
◎質問者からの返答

これがいいですねw

これを使用します。


3 ● aside
●0ポイント

idチェック入れてなかったのでif文とかで対応してください

◎質問者からの返答

了解です。


4 ● smeghead
●25ポイント

テクニックと言えるかわかりませんが、setValueAuto関数で設定するようにすれば、設定する側は意識しなくて良くなります。setValueAutoの判定処理は実用には不十分かもしれませんので補完してください。

<html>
 <body>
 <span id="top"></span>
 <div id="description"></div>
 <input id="name" type="text">
 </body>
 <script>
 function init() {
 setValueAuto("top", "トップ");
 setValueAuto("description", "説明文");
 setValueAuto("name", "ななし");
 }
 //idで指定されたエレメントの値を設定する。
 function setValueAuto(id, value) {
 var element = document.getElementById(id);
 if (!element) return;
 if (element.tagName == 'INPUT') {
 element.value = value;
 } else {
 element.innerHTML = value;
 }
 }
 document.onload = init();
 </script>
</html>
◎質問者からの返答

これもありですねw

ありがとうございます。


5 ● クラック
●20ポイント
function editDOM(o, t) {
switch (o.tagName.toLowerCase()) {
case 'input': case 'textarea':
if (typeof t != 'undefined')
o.value = t;
return o.value;
default:
if (typeof t != 'undefined')
o.innerHTML = t;
return o.innerHTML;
}
}

editDOM(document.getElementById('node'), 'TEXT'); // nodeにTEXTをセットする。
alert(editDOM(document.getElementById('node'))); // nodeの中身を表示する。
◎質問者からの返答

検討してみます。

ありがとうございます。

関連質問


●質問をもっと探す●



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