Home > 技術 > innerHTMLに値がないとgetElementByIdでnullになるパターン

innerHTMLに値がないとgetElementByIdでnullになるパターン

onloadやDomContentLoadedを待たずにJavaScript処理をしたい場合は多々あるのですが、例えば以下のようにあるエレメントの下にScriptタグを書いて実行させる場合にinnerHTMLの値が空っぽだとdocument.getElementByIdで取得したときにnullになってしまう現象があった。

<span id="txt"></span>
<script type="text/javascript">
<!--
alert(document.getElementById("txt"));
//-->
</script>

alertはnullと表示される。

<span id="txt">aiueo</span>
<script type="text/javascript">
<!--
alert(document.getElementById("txt"));
//-->
</script>

alertは[object HTMLSpanElement]と表示される。

divタグでやっても一緒だった。
divとかspanはあくまでも枠やラベル的なものでしかないからダメなのかな。

以下のようにbutton要素の場合はinnerHTMLがなくても大丈夫だった。

<button id="txt"></button>
<script type="text/javascript">
<!--
alert(document.getElementById("txt"));
//-->
</script>

また当然のようですが、onloadを待てばちゃんとエレメントのオブジェクトが取得できる。
これが出来ないとinnerHTMLに値を挿入できなくなっちゃうしね。

<script type="text/javascript">  <!--
function f() {
    alert(document.getElementById("txt").innerHTML);
}
//-->
</script>
<body onload="f();">
<span id="txt"></span >
</body>

【関連する記事】

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Remember personal info

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1051
Listed below are links to weblogs that reference
innerHTMLに値がないとgetElementByIdでnullになるパターン from HouseTect, JavaScripter Blog

Home > 技術 > innerHTMLに値がないとgetElementByIdでnullになるパターン

Tag cloud
Categories
月別アーカイブ
このブログについて
author:hisasann

description:フリーランスで仕事しているプログラマーです。
最近はJavaScript、Rails、Java(Struts+Spring)なんかをいろいろといじっています。
今やってみたいのはFlashやActionScriptかな。
また誕生して半年になる子供の成長を見守るパパでもあります。

日々の日記 :

他に運営しているブログ:

利用しているWebサービス :
最近のコメント
Powered by
Powered by
Movable Type 3.35

Page Top