• ベストアンサー

javascriptのDOMについて

こんにちは、早速ですがご質問させていただきます。 ・質問内容 <div id="contents">の子ノードである<div id="d1">を[alert(document.getElementById("contents").firstChild.nodeType);]で確認したところ、なぜか「３」と表示されました。nodeNameなどで確認しても「#text」と表示されてしまいます。 なにが原因なのでしょうか。 【javascriptの内容】*外部読み込み var Samp = { test : function () { alert(document.getElementById("contents").firstChild.nodeType); }, } 【htmlの内容】 <body> <div id="header"></div> <div id="contents"> <div id="d1"> 111 </div> <div id="d2"> 222 </div> <div id="d3"> 333 </div> <div id="d4"> 444 </div> </div> <div id="footer"> <button onClick="Samp.test()">onPress</button> </div> </body> 【環境】 OS:Mac OS X ブラウザ:Firefox 3.0 エディタ:Dreamweaver ご教授のほどヨロシクお願いいたします。

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

  • ベストアンサー
回答No.1

正しい挙動。 開始タグ直後に改行されているから。 改行一つからなるテキストノードです。それは。 オマケ: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1938918D The special value "*" matches all tags.

takachipo
質問者

お礼

アドバイス有り難うございます！ ↓のように改行なしで記述したら要素ノードとして表示されました。 <div id="contents"><div class="d1">111</div><div class="d2">222</div> </div> 教えていただいたサイト利用したいと思います。 （英語ばかりで少し大変ですが。。） 本当に有り難うございました！

その他の回答 (3)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.4

#2は間違っています・・・classnameをひっぱってるつもりで スタティックにd1を指定していました。 #3さんご指摘ありがとうございます。 一般にclassは「含まれる」処理をいれますね。 私も必要な場合は当然そういうフローを入れています。 しかしclassを２つ以上設定するかどうかは、ユーザーの運用でカバーできるので このような掲示板で回答するときは「一致する」で十分だと考えています。 複雑な処理を書いて、フローがみえにくくなっては本末転倒ですしね。 同じようにform内のinputにnameでアクセスするときわざわざループで まわさないのに近いかなぁ・・・ 他人に押し付ける気はありませんが、個人的にはそういうのは必要に 応じて柔軟に処理をいれるべきだと思います （っていうか、nameでアクセスするなというのが原則か）

回答No.3

毎回回答見てて思うんですが, クラス名の文字列と「一致」、ではなく tokenizeして,その中にクラス名が「含まれる」でないといけないんです>yambejpさん

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

まぁすべての要素はオブジェクトであるという原則を思い出せば、 改行マークでさえテキストノードとして取り扱われることも 理解いただけると思います。 今回の件はそもそもがidで指定しているのですから document.getElementById("d1")で十分ですが、たとえばclassで処理してる ならこんなかんじで拾えばいいでしょう （めんどうなのでとりあえず最初にヒットしたオブジェクトしか拾いません） <script> function test(){ var contents=document.getElementById("contents"); contents.getChildByClassName=getChildByClassName; alert(contents.getChildByClassName("d1").nodeType); alert(contents.getChildByClassName("d1").innerHTML); } function getChildByClassName(classname){ var n=this.firstChild; while(n){ if(n.className=="d1") break; n=n.nextSibling; } return n; } </script> <body> <div id="header"></div> <div id="contents"> <div class="d1"> 111 </div> <div class="d2"> 222 </div> <div class="d3"> 333 </div> <div class="d4"> 444 </div> </div> <div id="footer"> <button onClick="test()">onPress</button> </div> </body>

takachipo
質問者

お礼

アドバイス有り難うございます！ ↓のように改行なしで記述したら要素ノードとして表示されました。 <div id="contents"><div class="d1">111</div><div class="d2">222</div> </div> function getChildByClassName()についても今後の参考にさせていただきます^-^ 本当に有り難うございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • [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要素内の文字列が変化するし・・・・

  • IEの半角スペースの連続とinnerHTMLについて

    IEだと文頭に半角スペースがある場合は詰められ、文中に半角スペースが連続する場合は一つにまとめられてしまいます。 ただ、innerHTMLだと正しく取れると思っていましたがやはり詰められて取得されてしまいます。 ただしく取得できる方法を模索しております。 hiddenに値を設定などではなく、現在のHTMLからの取得方法をお願い致します。 下記のソースで状況を再現できますのでご確認ください（blankの間のスペースは2つ空いています） <html> <head> <script> function testfunc() { str = document.getElementById('test2').innerHTML alert('[' + str + ']'); } function testfunc2() { str = document.getElementById('test').childNodes[0].firstChild.nodeValue; alert('[' + str + ']'); } </script> </head> <body> <div id="test"><div id="test2"> blank blank </div></div> <input type="button" value="CLICK ME1" onclick="testfunc()"><br> <input type="button" value="CLICK ME2" onclick="testfunc2()"> </body> </html>

  • JavaScript表示切替の問題

    ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>

  • DOMのchildNodesについて

    htmlに　以下divタグ(idというid属性と持つ)をもつ内容を記述しました。 ●html <div id="id"><i>サンプル内容</i>とは</div> 次に、childNodesで取得しようと思うのですが、 　document.getElementById("id").childNodes　と記述した時、 childNodesの戻り値に、返される配列はどうなるのでしょうか？ id[0]は、i要素。 id[1]は、テキストノードとなる。 と本に書いているのですが、 id[2]以降(id[3]、id[4)等]が何になるのかわかりません。 ●予想 id[2]は　</i>　 id[3]は　とは と思い、alertで出力してみたのですが結果がnullになって分からないのです・・・。 どなたか、childNodesの動作をご教授お願いできないでしょうか。 おねがいします。

  • javascriptの動的読み込みについて教えてください

    javascriptの動的読み込みについて教えてください いつもお世話になります。 jqueryを勉強中のものです。 少しややこしいのですが、 以下のmenu.htmlとmain.htmlを持ったframe.htmlで、メニューの試験ボタンを押してmain.htmlの<div id="target_id">にload.htmlを動的に読み込んだ時、loadされたhelloボタンが作動しません。 menu.htmlのtest()中のalert(data);でload.htmlの<script>が読み込まれていることは確認できるのですが・・何が原因でどこが悪いのでしょうか？ よろしくご指導お願いします。 frame.html ----------------------------------------------------------- <html> <head> <title>Dynamic Load Test</title> </head> <frameset name="frame" cols="180,*"> <frame name="menu" src="menu.html"> <frame name="MainPanel" src="main.html"> </frameset> </html> ----------------------------------------------------------- menu.html ----------------------------------------------------------- <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"><!-- function test(){ jQuery.get("./load.html",function(data){ alert(data); $("#target_id",window.parent.MainPanel.document).html(data); }); } // --></script> </head> <body> <button onClick="test();">試験</button> </body> </html> ----------------------------------------------------------- main.html ----------------------------------------------------------- <html> <head> </head> <body> <h1>main.html</h1> </body> <div id="target_id"></div> </html> ----------------------------------------------------------- load.html ----------------------------------------------------------- <h1>load.html</h1> <script type="text/javascript"><!-- function hello(){ alert("こんにちわ"); } // --></script> <button onClick="hello();">hello</button> -----------------------------------------------------------

  • JavascriptでValueを変えるには

    再び質問致します。getElementByIdを前回の質問から学ばせて頂きました。やりたいことはTagの値の変更です。 以下のスクリプトでgetElementByIdはアラートが出ますので存在し値もあっている訳ですが代入が出来ません。ReadOnlyをはずしても駄目です。何かが間違っていると思います。宜しく御願い致します。 <html> <head> <title>エレメントの表示</title> </head> <script type="text/javascript"> function Disp_change() {function SchDefult_Disp_change() { alert("in1"); if (document.getElementById("SchDefult").value == 'Only For' ) { alert( "必須入力です　　　" )}; SchDefult.value = "in1"; SchDefult = "in1"; } </script> <body> <div class="frameHead frameDetail"> <div class="inC1">連絡情報</div> <div class="clear"><hr /></div> <div class="inC2"> <input class="button3" type="button" name="fromUserList" value="" onclick="Disp_change()"> <input class="inIPC2 " type="text" id="SchDefult" name="parent" value="Only For"> </div> <script type="text/javascript"> Disp_change(); }; </script>

    • ベストアンサー
    • Java
  • javascriptの記述について

    私は今javascriptを独学で勉強をしていて、勉強した範囲内で自分で作成してみようと思いjavascriptのプログラムを 書いています。 やりたいこととしては メイン画像があり、その下に三つボタンを作成し、 その三つのボタンのどれか一つにマウスを持っいくとメイン画像が切り替わるという javascriptを作成しています。 またその三つのボタンにはそれぞれメイン画像が切り替わるようにイベントをだしています。 html側 <body> <div id="image"> <img src="image/main-image.jpg" /> </div> <div id="bottonbox"> <div id="botton1"> <img src="image/staff01.png" /> </div> <div id="botton2"> <img src="image/staff01.png" /> </div> <div id="botton3"> <img src="image/staff01.png" /> </div> </body> javascript window.addEventListener('load',photo_change,false); function photo_change(event){ var elem = document.getElementById('botton1'); elem.addEventListener('mouseover',botton1,false); elem.document.getElementById('botton2'); elem.addEventListener('mouseover',botton2,false); elem.document.getElementById('botton3'); elem.addEventListener('mouseover',botton3,false); } function botton1(event){ var img_change = document.getElementById('image'); img_change.removeChild(img_change.firstChild); var img =document.createElement('img'); img.src = 'image/main-image2.png'; img_change.appendChild(img); } ※botton2,3はsrc=画像名だけが違うだけで、botton1関数と同じの為、省略します。 これを実行すると、もともとあるメイン画像がremoveされず、下に新しい画像が表示されてしまいます。 ブレークポイントをつけてトレースしたのですが、どうやらimg_change.removeChild(img_change.firstChild); でremoveされていないらしくなぜか二回目にremoveされます。 ですので、試しに function botton1(event){ var img_change = document.getElementById('image'); //removeChild二回やってみる img_change.removeChild(img_change.firstChild); img_change.removeChild(img_change.firstChild); var img =document.createElement('img'); img.src = 'image/main-image2.png'; img_change.appendChild(img); } こうするともともとあったメイン画像がremoveされ、botton1にマウスを載せた時に 表示させようとしていた画像がちゃんと表示されます。 ですが、なぜ一回のimg_change.removeChild(img_change.firstChild);では メイン画像をremoveできないのでしょうか。 どなたかわかる方おしえていただけますでしょうか。 また、どこが悪いのか、など解説も付け加えていただけると幸いです。

  • Javascriptを短くしたい

    初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>

  • 「ポタン」で表示・非表示 (つづき)(^^;

    「ポタン」で表示・非表示 ブロック<Div></Div>の「表示・非表示」を「ポタン」でやりたいのですが。。の件で、下記の回答をいただき、できたのですが、 最初に「★非表示」の状態にしたい場合は、どうしたらいいのでしょうか?　よろしく願いいたします。 <html> <body> <div id="a">abcdefg</div> <input type="button" value="on/off" onClick="disp('a')"> <hr> <div id="b">abcdefg</div> <input type="button" value="on/off" onClick="disp('b')"> <hr> <script> function disp(id){ // alert(document.getElementById(id).style.display=='none'?'block':'none'); document.getElementById(id).style.display = document.getElementById(id).style.display=='none'?'block':'none'; } </script>

  • javascriptについて教えてください。

    divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id; 　alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する