• ベストアンサー

document.getElementById() で返されるオブジェクトについて

日本語で上手く説明できないのですが、 document.getElementById()で返されるオブジェクトに共通して使える関数を作成したいのです。 大体、こんな感じです。 Object.prototype.hoge = function(){...}; document.getElementById("ID").hoge(); しかし、この方法ではhogeは実行されないので、どうもObjectじゃないようなのです。 代わりに何を使えば良いのか、また、それが分かるサイトをご存知の方は、ご教示願います。

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

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.4

> 試してみたところ、No.2さんの言うとおり、IEでは動きませんでした… IEは確かに出来ないですね。知りませんでした。 ちょっと探してみましたが上手い方法が見つからないので、代替手段が必要かなと思います。 念のためお聞きしますが、ドットシンタックスに拘る理由は何でしょうか? それが例えば - DOM共通の関数を定義したい - 括弧の入れ子は視認性が悪い なら、prototype.jsやjQueryのようにオブジェクトを独自に定義してしまってもいいですね。 var getId = function(id){ return document.getElementById(id); }; getId.hoge = function(){ return this.nodeName; }; alert(getId('TEST').hoge()); 単純にprototype.jsやjQueryを使う方が便利かもしれませんが、 自由に拡張したいのなら、自作は融通が利いていいと思います。

kura07
質問者

補足

あ、そういう方法もあるのですか! 参考になります。

その他の回答 (4)

回答No.5

メモ: >IEは確かに出来ないですね。知りませんでした。 IE8: http://d.hatena.ne.jp/amachang/20090115/1231989477 #新機能、ってぐらいだから…

kura07
質問者

お礼

ありがとうございます。参考にします。 数々の回答をしてくださって、皆さん本当にありがとうございました。 みなさんに20ポイントを差し上げたいくらいです。 この場で、お礼させていただきます。

回答No.3

attachEvent('onload', function(){ for(var i=0, es=document.getElementsByTagName('*');es[i];i++) es[i].hoge=function(){...}; } ); とか。

kura07
質問者

お礼

なるほど…。 動作が重くなりそうですが、この方法も参考にします。 ありがとうございました。

回答No.2

IEだったらどうする?

kura07
質問者

お礼

どうすればいいのでしょうか…?

  • think49
  • ベストアンサー率59% (285/482)
回答No.1

HTMLElementかな? こんな感じで使います。 /* 対象ノードを削除 */ HTMLElement.prototype.removeNode = function(){ return this.parentNode.removeChild(this); }

kura07
質問者

お礼

試してみたところ、No.2さんの言うとおり、IEでは動きませんでした… しかし、他のブラウザでは動くものもあったので、参考にさせていただきます。 ありがとうございました。

関連するQ&A

  • 【javascript】document.getElementByIdは一つしか使えないの?

    以下をhtmlをブラウザで見ると、文字列"aaa"は表示されますが、"bbb"は表示されません。 <html> <head> <SCRIPT LANGUAGE='JavaScript1.2'><!-- function init(){ document.getElementById("a").innerHTML="aaa"; document.getElementById("b").innerHTML="bbb"; } //--></script> </head> <body onload="init()"> <div id="a"></dev> <div id="b"></dev> </body> </html> ブラウザはIE,FFと試しましたが共に同じ結果でした。 FFのエラーコンソールには document.getElementById("b").innerHTML="bbb" is null のエラーメッセージが出てましたが、文法的に何が問題なのでしょうか?

  • getElementByIdを使用したグローバル変数の定義(使い方について) 

    グローバル変数の定義について教えてください。 getElementByIdを、グローバル変数で使用することはできないのでしょうか? 【グローバル変数(整数)】の場合 ------------------------------------------------- //グローバルで整数を定義 var a = 10; function test(){ alert(a.value); } 結果:「10」が表示される。 ------------------------------------------------- 【グローバル変数(getElementByIdを使用)の場合】 ------------------------------------------------- //グローバルでgetElementByIdで取得したオブジェクトを定義 var a = document.getElementById("objname"); function test(){ alert(a.value); } 結果:「null」 が表示される。 ※a = document.getElementById("objname"); でも同様。 ------------------------------------------------- 【ローカル変数(getElementByIdを使用)の場合】 ------------------------------------------------- function test(){ //ローカルでgetElementByIdで取得したオブジェクトを定義 var a = document.getElementById("objname"); alert(a.value); } 結果:「画面入力値」 が表示される。 ------------------------------------------------- このように getElementByIdで取得したオブジェクトを、 グローバル変数として扱った場合、nullとなるので困っています。 getElementByIdで取得したオブジェクトを、 グローバル変数として扱う良い方法はないでしょうか? 【環境】 OS:WindowsXP Pro 使用JavaScript:外部ファイルのjavaScript

  • getElementByIdの戻り値がnullになります。

    getElementByIdでdivタグのオブジェクトを取得したいのですが、nullとなってしまいます。 以下のコードのどこがいけないのでしょうか。 --- <div id='a'></div> <script language="javascript">// <!-- var a_ = document.getElementById('a'); document.write(a_); // --></script> ---

  • JavaScriptのgetElementById以降の記述?

    ボタンをクリックすると表示内容とボタン色を変える、というJavaScriptを書き換えているところなのですが、 わからないことがあるので宜しくお願いします。 ※ボタンにはid名(id="tab0"、id="tab1"、id="tab2"、…といったふうに)が付けてあります。 ------------------------------------------------------------ 参考にしている書き換え前のJavaScriptの一部 ------------------------------------------------------------ function changeTab(n) { if ( n != tabNum && document.getElementById("tab"+n+"_content") ) { document.getElementById("tab"+tabNum).style.backgroundColor="#666"; document.getElementById("tab"+tabNum+"_content").style.display = "none"; document.getElementById("tab"+n).style.backgroundColor="#fff"; document.getElementById("tab"+n+"_content").style.display = "block"; tabNum = n; }} ------------------------------------------------------------ ボタン(<button type="button" id="tab0">)の代わりに 画像(<input type="image" id="tab0" src="xxx.gif">)にしたので、 クリックしたときに画像を別の画像に入れ替えるようにしたいのです。 「style.backgroundColor="#fff";」の部分を書き換えれば良いと思うのですが…。 説明不足の点などありましたら補足しますので宜しくお願いします。

  • getElementByIdの指定?

    <SPAN>タグにIDを指定して、getElementByIDで呼び出して、<SPAN>タグが適用されているテキスト内容を書き換えたいのですが。 <SPAN>タグが同一フレーム内にあれば、 document.getElementById("idname").firstChild.nodeValue="書き換えるテキスト" で、変わるのですが。 書き換えたいIDを持つテキストが別のフレームにある場合、その指定方法がわかりません。 普通のフレーム指定なら、 documentで始める代わりに、parent.framename だと思ったので、やってみたのですが、どうもエラーが返ってきて動きません。 使っているブラウザはインターネットエクスプローラ5とネットスケープ6です。 どなたかわかる方、教えてください。 よろしくお願いします。

  • setTimeoutのthis参照について

    prototypeメソッドの中でsetTimeout関数を使用したところ、thisで自身の関数を参照しなくなりました。setTimeoutの挙動についてぐぐってみたのですが、いまいちsetTimeoutを使用したときのスムーズな記述方法がわかりません。 ******************************** var hoge=function(){ this.myName="ほげ"; } hoge.prototype={ init:function(){ setTimeout(function(){ hoge.prototype.displayName(); // ★(1)setTimeout関数の中でのメソッドの適した呼び出し方は? // ↑の記述でも呼び出せるけど、間違ってる気がする。。 },1000) }, displayName:function(){ // ★(2)ここでhogeオブジェクトのmyNameプロパティを参照するにはどう記述すれば良いのか? //console.log(this.myName); //↑setTimeoutを使ったのでthis参照はwindowオブジェクトになっているから違う //console.log(hoge.myName); →undefinedを返す } } window.onload=function(){ var a=new hoge(); a.init(); } ******************************** 上記のようなprototype関数を使用したときのスムーズな記述方法を教えていただけませんでしょうか。 知りたいのは下記2点です。 ★(1)prototypeメソッドを使用したとき、setTimeout関数の中でのメソッドの適した呼び出し方は? ★(2)setTimeout関数内で呼び出したメソッドから、自身のオブジェクトのプロパティを参照するにはどう記述すれば良いのか? 初心者なので説明が下手だったり、質問内容で間違った記述があるかもしれません。 質問内容で問題がありましたらご指摘いただけると助かります。

  • javascript 親オブジェクトと子オブジェクトを分離させたい

    例えばjavascriptで下のようなコードを書いたとします。 a=new Array() a[0]=new OBJ(); function OBJ(){ this.prop=document.getElementById('aaa') this.prop2=document.getElementById('bbb') } a[0].prop.addEventListener(click,func,false); function func(){ ??? } func()関数内でthisを使うとa[0].propを参照できます。 一方、a[0].prop2を参照するにはどうすればいいのでしょうか? 配列の要素番号を指定しないで参照させる方法が分からず悩んでいます。 下のようにもしできるのであればいいのですが。。。 a[0]とpropのオブジェクトを分割->a[0]オブジェクトを抜き出し-> a[0]オブジェクトにprop2を追加 または別の方法があるのでしょうか。 ぜひぜひご回答のほどお願いいたします。

  • [javascript][DOM]getElementByIdやremoveChildの戻り値と処理の結果

    以前から気になっていたけれど聞かなかったこと。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>QFUMEI テストケース1</title> <script type="application/ecmascript"> function init(){ var hoge = document.getElementById("hoge"); var fuga = document.getElementById("fuga"); hoge.removeChild(fuga); alert(fuga); // [object HTMLParagraphElement] ← nullではない fuga = document.getElementById("fuga"); alert(fuga); // null } </script> </head> <body onload="init();"> <div id="hoge"> <p id="fuga">ほげ</p> </div> </body> </html> 結局 fuga = getElementById("fuga")によって 何が代入されているのでしょう? document上のp#fugaへの参照であれば removeChildの直後 fuga = nullとなっていてもよさそうだなと思っているのですが・・・・。 hoge.firstChild.nodeValueをいじるとp要素内の文字列が変化するし・・・・

  • 【jquery】即時関数について

    知識のある方に教えて頂きたく、貴重なスペースをお借りいたします。 $(function(){ })と、即時関数の(function(){})();は 何が異なるのでしょうか。 よくグローバルオブジェクトの汚染を防ぐ為に 即時関数を使用すると記載がありますが、 通常JSを記載する際に使用する、DOM構築後に実行をする記述 $(function(){ })も、結局変数などをVar宣言すれば、 ローカル変数になるので、同じこと(グローバルの汚染を防げる) ではないかと思うのですが、間違っておりますでしょうか。 それだとすると、即時関数の使い道がわからないのですが、 ご教示頂けますでしょうか。 また、以下の(1)の記述方法だと、 「hoge」はグローバルオブジェクトとなってしまいますが、 (2)だとなりませんよね。 であれば、基本的には(2)のように関数は記載した方が良いのでは ないのでしょうか。結構(1)の書き方をしている方がいるので。 どなたかご教示いただければ幸いです。 よろしくお願いいたします。 ----------------------- (1) $(function(){ hoge(); }) function hoge(){ return true; } ----------------------- ----------------------- (2) $(function(){ hoge(); function hoge(){  return true; } }) -----------------------

  • javascriptのconstructorプロパティについて

    constructorプロパティとは、 オブジェクトの初期化で使用されたコンストラクタ関数を参照 とのことなので、下記2パターンのPGを作成しました 1.prototypeの明記なし function Hoge(){ this.init = "Hogeで初期化"; this.getInit = function(){ return this.init; } } var obj = new Hoge(); alert(obj.constructor == Hoge); for(prop in obj){ alert( prop + " - " + obj[prop]); } //実行結果 True init - Hogeで初期化 getInit - function () { return this.init; } 2.prototypeの明記あり function Hoge(){ this.initialize.apply(this,arguments); this.init = "Hogeで初期化"; this.getInit = function(){ return this.init; } } Hoge.prototype ={ initialize:function(){ this.init = "Hoge.prototype.initializeで初期化"; }, getInit:function(){ return "Hoge.prototype.getInit()"; } } var obj = new Hoge(); alert(obj.constructor == Hoge); for(prop in obj){ alert( prop + " - " + obj[prop]); } //実行結果 false init - Hogeで初期化 getInit - function () { return this.init; } initialize - function () { this.init = "Hoge.prototype.initialize\u3067\u521D\u671F\u5316"; } ・質問内容 prototypeの明記なしの場合は、Hogeのコンストラ関数を参照している(結果がTrueのため) prototypeの明記ありの場合は、falseのためコンストラ関数を参照していないのですが、 prototype明記あり、なしで結果が異なる理由が分からない状態です。 (prototype.constructorにも手を出したのですが、上記が解決しないため  constructorプロパティに関してのみ質問した次第です) ネット、書籍等で調べたのですが、検討がつかない状態です。 お手数ですが、ご教授お願い致します。

専門家に質問してみよう