- ベストアンサー
body内で<script>の位置のオブジェクトを取得する方法
- JavaScriptでbody内の特定の場所に配置された<script>タグ内で生成されるオブジェクトを取得する方法を探しています。
- document.writeでinputを生成する方法は不適切であり、<script>の位置や親のnodeを取得することで目的を達成できるかもしれません。
- IE6以降の対象ブラウザで、body内の<script>の位置や親のnodeを取得する方法か、別の方法で上記の要件を実現する方法を教えてください。
- gaihanbosi
- お礼率52% (12/23)
- JavaScript
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
document.createElementで生成したオブジェクトに直接イベントを割り当てれば良いかと思いますが、いいかがでしょう？ <!DOCTYPE HTML> <html> <body> <h3>focus で blue になります</h3> <script> var node = document.createElement('input'); document.body.appendChild(node); node.onfocus = function(){ this.style.backgroundColor = 'blue' } node.onblur = function(){ this.style.backgroundColor = 'transparent'; } </script> <h3>focus で red になります</h3> <script> var node = document.createElement('input'); document.body.appendChild(node); node.onfocus = function(){ this.style.backgroundColor = 'red' } node.onblur = function(){ this.style.backgroundColor = 'transparent'; } </script> </body> </html>
その他の回答 (4)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
document.getElementsByTagName('script')で全ての<script>を取得できますので、 src属性かinnerHTMLを調べて、特定のファイル名や文字列があればそのオブジェクト自身とparentNodeを取得してはいかがでしょうか。 scriptタグにはid属性は使えないので、getElementsById()は使えません。 （文法に反しているため動作はブラウザ依存ですから、もしかすると動くかもしれませんが。）
- fujillin
- ベストアンサー率61% (1594/2576)
何をしたいのかよくわかんないけど… ＞親の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)
<!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)
いまいち何やりたいのかわからないけどこういうこと？ <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> とか
補足
早速の提案ありがとうございます。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の位置のオブジェクト取得か何かできないかと思っています。
お礼
cyokodogさんありがとうございます。 ご回答遅くなりましてすみません。 どうやらcreateElementの動作を誤解していたようです。 createElementを行うと、「既存のBodyの最後にelementが追加される」と認識していました。 が、「既存」の部分を、読み込まれたhtmlファイルに記述されている最後に追加されると思い込んでいました。 [誤ったイメージ] ------------------------------ <body> <script> createElement</script> <input><input> <!-- ここにElementが追加される --> </body> ------------------------------ 実験したところ、createElementを行ったscriptタグの個所に挿入されることがわかりまして。希望のことができることを確認しました。 [本来の動作] ------------------------------ <body> <script> createElement</script> <!-- ここにElementが追加される --> <input><input> </body> ------------------------------ コメントいただきました皆様ありがとうございました。