body内で<script>の位置のオブジェクトを取得する方法
- JavaScriptでbody内の特定の場所に配置された<script>タグ内で生成されるオブジェクトを取得する方法を探しています。
- document.writeでinputを生成する方法は不適切であり、<script>の位置や親のnodeを取得することで目的を達成できるかもしれません。
- IE6以降の対象ブラウザで、body内の<script>の位置や親のnodeを取得する方法か、別の方法で上記の要件を実現する方法を教えてください。
- ベストアンサー
body内で<script>の位置のオブジェクトを取得する方法
javascriptで、下記状況でNode(もしくはObject)を取得する方法がないか探しています。 body内の所定の場所に、<script>タグによりJavaScriptが記述されており、 その<script>タグ内で、<input>を生成しそれに対しイベントの追加や所定の処理を行いたいのです。 例)-------------------------------------------------- <body> <input type="text" value=""> <script type="text/javascript"> /* ここで、inputを生成後そのObjectに対して処理を行うため、 inputのオブジェクトをnameやidを使わず取得したい。 */ </script> <input type="text" value=""> </body> -------------------------------------------------- document.writeでinputの生成はできますが、目的に合わないかなと思っています。 理由として、厳密にObjectは取得できない場合があると考えています。 document.write("<input type='button' name='hoe'..."); document.getElementsByName("hoe"); と行えば取得できるとおもいますが、nameでは重複しているときに、処理の対象が特定できない(と思っている)ためです。 idも、処理のためだけにid付するのは、避けたいなと考えています。 そこで、<script>の位置（もしくは親）のnodeを取得できれば,そこからappend出来る可能性があると、発想したのですが、その方法が分からず詰まってしまいました。 (対象ブラウザ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/2281)
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の位置のオブジェクト取得か何かできないかと思っています。
関連するQ&A
- フォーム内のオブジェクトを取得したい
フォームタグ内のオブジェクトをphpで取得できないでしょうか。 たとえば <From Action"xxx.php" Post="Mothod"> <Input Type=Text Name=xxx> <Input Type=Text Name=xxx> <Input Type=Submit Name=xxx Value=送信> </Form> このようなフォームがあり「送信」を押下した際に、このフォームオブジェクトの要素を知りたいのです。 JavaScriptであれば document.forms[0].elements[0] で拾えたと思うのです。 よろしくお願いいたします。
- ベストアンサー
- PHP
- jQueryで複数の要素オブジェクトを取得したあと
jQueryで複数の要素オブジェクト(というの？)を取得するケースで、jQueryオブジェクトとして扱えなくなっていることが気持ち悪く、ここをどうにかできないかという話です。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <input type="text" id="ii1" name="nn" value="マツコ"> <input type="text" id="ii2" name="nn" value="竹田"> <input type="text" id="ii3" name="nn" value="小梅太夫"> <script> jQuery(function ($) { alert($("#ii1").val()); // (0) alert($("[name=nn]:eq(1)").val()); // (1) alert($("[name=nn]:first-child").val()); // (2) alert($("[name=nn]")[2].value); // (3) alert($("[name=nn]").get(1).value); // (4) }); </script> このソースで、(0)はいいとして、(1)(2)のようにオブジェクトが一つしか返らないような場合には、「.val()」メソッドが使えます。しかし(3)(4)の場合には、少なくともこのままでは「.val()」メソッドが使えないため、Elementオブジェクトのvalueプロパティを使用しています。 値を取得するコードで「.val()」「value」が混在しているのが気持ち悪く、「value」に統一したいです。ちなみに実際には「$("[name=nn]")」のように取得したあと、for文でまわして処理するケースが多いです。 「$("[name=nn]")」で取得し、オブジェクトの件数をカウントしたあと苦肉の策で、for文の中で「$("[name=nn]:eq(" + i + ")").val()」等と書いたこともありますが、むしろ読みにくくなってしまっています。これだったらまだvalueプロパティを使う方がいいかと思います。 「$("[name=nn]")」で複数のオブジェクトを取得した後で、それぞれのオブジェクトに「.val()」を使う方法はありますでしょうか？あるのなら具体的に教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- form につけた id 値の取得方法
form 内に id という名前の input 要素があると、form につけた id 値が取得できません。firefox で確認しましたが、例の f2.id が input 要素になります。このような場合 form の id 値はどのようにすれば取得できるでしょうか。 <!doctype html> <html> <head><title>id test</title></head> <body> <form id="f1" name="f1"> <input type="hidden" name="idx"> </form> <form id="f2" name="f2"> <input type="hidden" name="id"> </form> <script type="text/javascript"> var f1 = document.getElementById('f1'); var f2 = document.getElementById('f2'); alert("f1.name: " + f1.name + ", f1.id: " + f1.id + "\nf2.name: " + f2.name + ", f2.id: " + f2.id); </script> </body> </html>
- ベストアンサー
- JavaScript
- 実行できず、エラーになってしまう（オブジェクトを指定してください。）
下記のソースを実行した場合、エラーになってしまいます。 エラー個所がどうしてもわかりません。 どなたか教えていただけないでしょうか。 よろしくお願いします。 <html> <head> <script type="text/javascript"> <!-- function froms() { for (i = 0; i <= 5; i++) { document.writeln("<INPUT TYPE=\"text\" SIZE=\"2\" READONLY>\n"); document.writeln("<INPUT TYPE=\"text\" SIZE=\"9\" READONLY>\n"); document.writeln("<INPUT TYPE=\"text\" SIZE=\"10\" READONLY>\n"); document.writeln("<INPUT TYPE=\"text\" SIZE=\"3\" READONLY>\n"); } } // --> </script> </head> <body> <script type="text/javascript">forms();</script> </body> </html> -----------エラーメッセージ--------------- ライン :17（現在は22行です（<script type="text/javascript">forms();</script>）） 文字 :1 エラー :オブジェクトを指定してください。 コード :0 URL :保存している場所
- ベストアンサー
- JavaScript
- オブジェクト数の取得
以下のようなテキストボックスがあります。 <input type="text" name="price1[0]"> <input type="text" name="price2[0]"> <input type="text" name="price3[0]"> <input type="text" name="price1[1]"> <input type="text" name="price2[1]"> <input type="text" name="price3[1]"> ・・・・ 添え字は[0]、[1]、[2]・・・となり、 データにより可変となっています。 入力するのは金額なので、数値かどうかのチェックを行いたいのですが、テキストフィールドの個数をどのように取得したらよいかがわかりません。 他のオブジェクトとのからみで、name="price1[]"のように変更することはできません。 （このようにすると、オブジェクト数は取得できるのですが） 上記記述のオブジェクト数の取得方法がわかる方、教えてください。テキストは金額のみなので、テキストフィールド全ての個数でもよいですし、price1[]、price2[]、price3[]各々の個数でもどちらでもよいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- コントロール名の取得方法について
いつもお世話になっております。 表題の件について早速ご質問なのですが、 例えば・・・ <form name="a"> <input type="text" name="txt01" value="no...1"> <input type="text" name="txt02" value="number2"> <input type="text" name="txt03" value="sono3"> <input type="text" name="txt04" value="その4"> <input type="text" name="txt05" value="これは5番目"> <input type="button" onClick="getControlValue(document.a)"> </form> というフォームがあったとして JavaScriptから <script type="text/JavaScript"> function getControlValue(oForm) { for (i=1;i<=5;i++) { oControlName = i番目のコントロール; // 数字の2桁0埋め処理を使用 alert(oControlName.Name + "の値は" + oControlName.value + "です。"); } return false; } </script> というループの中で上記フォーム(txt**)のコントロールを取得して、その値を取得するには どのような方法を取れば実現できるのでしょうか。 ご存知の方がいらっしゃいましたらお知恵をお借りできれば幸いに存じます。 よろしくおねがいいたします。
- ベストアンサー
- JavaScript
- ウィンドウサイズの変更を滑らかに取得したい
<html> <head> <script type="text/javascript"> function test(){ width = document.body.clientWidth; height = document.body.clientHeight; document.getElementById("haba").value=width; document.getElementById("takasa").value=height; } </script> </head> <body onload="window.setInterval('test()',1);"> 幅<input size="20" type="text" id="haba"/> 高さ<input size="20" type="text" id="takasa"/> </body> </html> -------------------------------------------------------------- 以上のような、ブラウザのウィンドウサイズを取得する コードを書いたのですが、滑らかに高さと幅が取得出来ずに困ってます。 イメージとしては、ウィンドウサイズをマウスで変更すると 高さと幅の数値がもっと滑らかに細かく変化するように したいのです。 どなたか回答お願いします。
- ベストアンサー
- JavaScript
- JavaScriptでプルダウンのサイズを取得
JavaScriptにてプルダウンのサイズ(<option>の数)を取得したいと思っています。 document.getElementById("pulldown").length にて取得できると思うのですが 試してみたところ無反応でした。どう書けばよろしいのでしょうか。 <html> <head> <script type="text/JavaScript"> alert(document.getElementById("pulldown").length); </script> </head> <body> <form name="form"> <select name="pulldown" id="pulldown"> <option value="5">5</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- そのオブジェクトが存在しているかどうか
p.htmを呼び出すと document.form0.sabmit が存在しなくてエラーになります もしＰＨＰでhtml生成していてそのhtml内で存在しないオブジェクトを使って何かをさせようとするとエラーになります document.form0.sabmitが存在するかどうかを判断して 存在しているれば document.form0.sabmit.focus() をするような記述はどうするのでしょうか? このサイトのPHPも同じようなエラーを発生しているようです p.htm: --------------------------------- <html> <head> <title>forward</title> <script type="text/javascript"> <!-- function FormFocus() { // document.form0.submit.focus(); document.form0.sabmit.focus(); } // --> </script> </head> <body onload="FormFocus()"> <form name="form0" method="post" action="q.htm"> <input type="submit" name="submit" value="push"/> </form> </html> --------------------------------- q.htm: --------------------------------- <html> <head> <title>backward</title> </head> <body> <form name="form0" method="post" action="p.htm"> <input type="submit" name="submit" value="push"/> </form> </html> ---------------------------------
- ベストアンサー
- JavaScript
- fileUploadオブジェクトへの値の代入 (困っています。教えてください。m(__)m)
こんばんは。 fileUploadオブジェクトへの値の代入がどうにもこうにもできません。 いったいどうしたらいいのでしょうか？どうか助けてください。 よろしくお願いいたします。m(__)m -- <HTML><BODY> <FORM NAME="myFormF"> <INPUT TYPE="file" NAME="myFile"> <INPUT TYPE="button" value="set FILEFILE -> file" onClick="document.myFormF.myFile.value='FILEFILE'"> <INPUT TYPE="submit" onClick="alert(document.myFormF.myFile.value)"> </FORM> <FORM NAME="myFormT"> <INPUT TYPE="text" NAME="myText"> <INPUT TYPE="button" value="set TEXTTEXT -> text" onClick="document.myFormT.myText.value='TEXTTEXT'"> <INPUT TYPE="submit" onClick="alert(document.myFormT.myText.value)"> </FORM> </BODY></HTML> -- key: fileUpload object,ファイルアップロードオブジェクト,WSH,javascript
- ベストアンサー
- JavaScript
お礼
cyokodogさんありがとうございます。 ご回答遅くなりましてすみません。 どうやらcreateElementの動作を誤解していたようです。 createElementを行うと、「既存のBodyの最後にelementが追加される」と認識していました。 が、「既存」の部分を、読み込まれたhtmlファイルに記述されている最後に追加されると思い込んでいました。 [誤ったイメージ] ------------------------------ <body> <script> createElement</script> <input><input> <!-- ここにElementが追加される --> </body> ------------------------------ 実験したところ、createElementを行ったscriptタグの個所に挿入されることがわかりまして。希望のことができることを確認しました。 [本来の動作] ------------------------------ <body> <script> createElement</script> <!-- ここにElementが追加される --> <input><input> </body> ------------------------------ コメントいただきました皆様ありがとうございました。