dポイントプレゼントキャンペーン実施中！

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

解決済

  • 質問者：gaihanbosi
  • 質問日時：
  • 回答数：5件

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を取得する方法か、別の発想で上記を実現できる方法があれば、教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： cyokodog
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

cyokodogさんありがとうございます。
ご回答遅くなりましてすみません。

どうやらcreateElementの動作を誤解していたようです。

createElementを行うと、「既存のBodyの最後にelementが追加される」と認識していました。

が、「既存」の部分を、読み込まれたhtmlファイルに記述されている最後に追加されると思い込んでいました。
[誤ったイメージ]
------------------------------
<body>
<script> createElement</script>
<input><input>
<!-- ここにElementが追加される -->
</body>
------------------------------

実験したところ、createElementを行ったscriptタグの個所に挿入されることがわかりまして。希望のことができることを確認しました。
[本来の動作]
------------------------------
<body>
<script> createElement</script>
<!-- ここにElementが追加される -->
<input><input>
</body>
------------------------------

コメントいただきました皆様ありがとうございました。

通報する
お礼日時：2009/10/11 09:03

No.4

  • 回答者： taloo
  • 回答日時：

document.getElementsByTagName('script')で全ての<script>を取得できますので、


src属性かinnerHTMLを調べて、特定のファイル名や文字列があればそのオブジェクト自身とparentNodeを取得してはいかがでしょうか。

scriptタグにはid属性は使えないので、getElementsById()は使えません。
（文法に反しているため動作はブラウザ依存ですから、もしかすると動くかもしれませんが。）
    • good
    • 1
    • 件
通報する

No.3

  • 回答者： fujillin
  • 回答日時：

何をしたいのかよくわかんないけど…



＞親の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,'&lt;').replace(/>/g,'&gt;').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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： babu_baboo
  • 回答日時：

<!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 なんて、過去の・・・
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

いまいち何やりたいのかわからないけどこういうこと？



<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の位置のオブジェクト取得か何かできないかと思っています。

補足日時：2009/09/18 00:25
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報