body内で<script>の位置のオブジェクトを取得する方法

2009/09/17 22:52

このQ&Aのポイント

JavaScriptでbody内の特定の場所に配置された<script>タグ内で生成されるオブジェクトを取得する方法を探しています。
document.writeでinputを生成する方法は不適切であり、<script>の位置や親のnodeを取得することで目的を達成できるかもしれません。
IE6以降の対象ブラウザで、body内の<script>の位置や親のnodeを取得する方法か、別の方法で上記の要件を実現する方法を教えてください。

gaihanbosi
お礼率52% (12/23)

JavaScript
回答数5
ありがとう数2

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

cyokodog
ベストアンサー率56% (13/23)

2009/09/24 18:07 回答No.5

質問者

お礼 2009/10/11 09:03

cyokodogさんありがとうございます。ご回答遅くなりましてすみません。どうやらcreateElementの動作を誤解していたようです。 createElementを行うと、「既存のBodyの最後にelementが追加される」と認識していました。が、「既存」の部分を、読み込まれたhtmlファイルに記述されている最後に追加されると思い込んでいました。 [誤ったイメージ] ------------------------------ <body> <script> createElement</script> <input><input>  </body> ------------------------------ 実験したところ、createElementを行ったscriptタグの個所に挿入されることがわかりまして。希望のことができることを確認しました。 [本来の動作] ------------------------------ <body> <script> createElement</script>  <input><input> </body> ------------------------------ コメントいただきました皆様ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (4)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2009/09/19 17:29 回答No.4

document.getElementsByTagName('script')で全ての<script>を取得できますので、 src属性かinnerHTMLを調べて、特定のファイル名や文字列があればそのオブジェクト自身とparentNodeを取得してはいかがでしょうか。 scriptタグにはid属性は使えないので、getElementsById()は使えません。（文法に反しているため動作はブラウザ依存ですから、もしかすると動くかもしれませんが。）

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2009/09/18 19:58 回答No.3

何をしたいのかよくわかんないけど… ＞親のnodeを取得できれば,そこからappend出来る可能性があると、＞発想したのですがどうせなら、変なところに<script>タグなど用いずに、全部DOM操作で行えばよいのでは？（順番で管理する）参考までに、適当に作成してみた。＊とりあえず文字も扱いやすいように、<label>タグに統一しています。＊要素の数が変わっても関係なく同じ処理で対応。＊ソースの表示は、innerHTMLを表示しているだけなので、ブラウザによって表示される内容が異なります。 <html> <head> <style type="text/css"> #test label { margin:0 1em; display:block; } .operation input { width:4em; } .operation button { width:5em; margin:0 1em; } hr { margin:2em 0; } </style> <script type="text/javascript"> window.onload = displaySorce; function set(elm,n){ var inp = elm.parentNode.getElementsByTagName('INPUT'); var la = inp[0].value, num = parseInt(inp[1].value); var e = document.getElementById('test'); var ch = e.getElementsByTagName('LABEL'); if (n) { if (ch[num]) e.removeChild(ch[num]); } else { num = ch[num]?ch[num]:null; var obj = document.createElement('label'); obj.appendChild(document.createTextNode(la)); inp = document.createElement('input'); inp.setAttribute("type","text"); obj.appendChild(inp); e.insertBefore(obj,num); } displaySorce(); } function clickevent(evt){ var e = evt?evt.target:event.srcElement; var p =e.nodeName=='LABEL'?e:e.nodeName=='INPUT'?e.parentNode:null; if (p){ document.getElementById('info').innerHTML = e.nodeName + "がクリックされました。\nラベルは『" + p.firstChild.nodeValue + "』\nインプットボックスの値は『" + p.getElementsByTagName('INPUT')[0].value + "』です。"; } } function displaySorce(){ var s = document.getElementsByTagName('DIV')[0].innerHTML; document.getElementById('sorce').innerHTML = s.replace(/</g,'<').replace(/>/g,'>').replace(/\n/g,'<br>'); } </script> </head> <body> <div> <form id="test" onclick="clickevent()"> <label>A:<input type="text" value="aaa"></label> <label>B:<input type="text" value="bbb"></label> </form> </div> <hr> ◆追加・削除の操作◆ <div class="operation"> 追加ラベル <input type="text" value="追加1"><br> 追加（削除）<input type="text" value="0">番号（0～）<br> <button onclick="set(this,0)">追加</button> <button onclick="set(this,1)">削除</button> </div> <hr> ◆クリック情報◆ <div id="info"></div> <hr> ◆現在のソース◆ <div id="sorce"></div> </body> </html>

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2009/09/18 09:31 回答No.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <form action="#"> <p> <input type="text" name="abc" class="a"><br> <input type="text" name="abc" class="b"><br> <input type="text" name="abc" class="c"><br> <input type="text" name="abc" class="d"><br> </p> </form> <script type="text/javascript"> //@cc_on document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 　'click', hoge, false); function hoge (evt) { 　var e　= evt./*@if (1) srcElement @else@*/ target /*@end@*/; 　if('INPUT' === e.nodeName && 'text' === e.type) alert(e.className); } </script> ”ここに”、いべんとをくっつけるから、やっかいになるんじゃないかな？おおもとで、ちぇっくするとかんたんになるじょ！ .onClick なんて、過去の・・・

ログインすると、全ての回答が全文表示されます。

yambejp
ベストアンサー率51% (3827/7415)

2009/09/17 23:07 回答No.1

いまいち何やりたいのかわからないけどこういうこと？ <body> <input type="text" value=""> <script type="text/javascript"> var s=document.getElementsByTagName('script')[0]; var obj=document.createElement('input'); obj.setAttribute("type","button"); obj.setAttribute("value","hoge"); obj.onclick=function(){alert("hoge")}; s.parentNode.insertBefore(obj,s); </script> <input type="text" value=""> </body> とか

質問者

補足 2009/09/18 00:25

早速の提案ありがとうございます。scriptもTagNameで取得できるんですね。その発想はありませんでした。 yambejpのコードをお借りして、補足します。 body内のscriptタグの位置に追記していきたいため、そのオブジェクトか、操作可能な何かを取得して関数に渡すことで実現できないかと考えています。 -------------------------------------------------- <html> <script type="text/javascript"> function hoho(s){ var obj=document.createElement('input'); obj.setAttribute("type","button"); obj.setAttribute("value","hoge"); obj.onclick=function(){alert("hoge")}; s.parentNode.insertBefore(obj,s); } </script> <body> <input type="text" value=""> <script type="text/javascript"> // var s=ここのオブジェクトを取得 hoho(s); </script> <input type="text" value=""> <script type="text/javascript"> // var s=ここのオブジェクトを取得 hoho(s); </script> </body> </html> -------------------------------------------------- 例では2つですが、実際は多数存在しhoho()も複雑になります。 document.writeでinputを生成し、nameもしくはidで操作することで実現できるかもしれませんが、nameやidが重複する可能性もあるため、scriptの位置のオブジェクト取得か何かできないかと思っています。

ログインすると、全ての回答が全文表示されます。