• ベストアンサー

JavaScriptでオブジェクトを取得したい

JavaScriptで特定の<dl>内の<dd>要素(複数)を取得したいと 思っています。<dd>要素の数はページにより変動しますので 不定です。 <dl id="myDL"> <dt>xxx</dt> <dd>@@@</dd> <dd>aaa</dd> </dl> どのようにすればよいでしょうか?

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

  • ベストアンサー
  • _himajin_
  • ベストアンサー率65% (128/195)
回答No.2

すでに回答のあるとおり、idを付けられるならそれで一意に取得可能です。 それが不可能ならor複数を一括で取得したいなら、getElementsByTagName で可能です。

ok_desu
質問者

お礼

どうもありがとうございます!

ok_desu
質問者

補足

オブジェクトに対してgetElementsByTagName()できたんですね。 考えればなるほどと思いますが、気づきませんでした。 ありがとうございます。

その他の回答 (3)

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

DOMっぽく・・・・ <script> function getDD(id){ var tag=document.getElementById(id); var c=tag.firstChild; while(c){ if(c.nodeName=="DD"){ var cc=c.firstChild; while(cc){ if(cc.nodeName=="#text") alert(cc.nodeValue); cc=cc.nextSibling; } } c=c.nextSibling; } } </script> <dl id="myDL"> <dt>xxx</dt> <dd>@@@</dd> <dd>aaa</dd> </dl> <input type="button" value="dl" onclick="getDD('myDL')">

ok_desu
質問者

お礼

これも応用が利きそうですね。 どうもありがとうございます!

noname#84373
noname#84373
回答No.3

obj = document.getElementById('myDL').getElementsByTagName('dd'); for(i=0;i<obj.length;i++){alert(obj[i].innerHTML);}

ok_desu
質問者

お礼

どうもありがとうございます!

回答No.1

提示頂いているコードではdl要素に対してid属性を設定することでdl要素を取得できるようにしているわけですが、 同じことをdd要素に対してもやればいいのではないでしょうか? そこまで出来てて何がわからないのでしょう???

ok_desu
質問者

お礼

どうもありがとうございます!

関連するQ&A

  • 特定部分のテキストを取得したい

    あるテンプレートに添って作られたページからテキストを取得するブックマークレットを作りたいのですが、 下記のような構造のページから りんご、みかん、ぶどう、部分のテキストだけ抜き出して取得するにはどうすればいいでしょうか? <h1 id="hoge">りんご</h1> ~ <span class="fuga"> <a href="test.html">みかん</a> </span> ~ <div class="piyo"> <dl class="foo"> <dt>xxx</dt><dd>ぶどう</dd> <dt>xxx</dt><dd>xxx</dd> <dt>xxx</dt><dd>xxx</dd> </dl> </div>

  • DOMへの追加方法について

    知識のある方に是非ともご教示いただきたいのですが、 以下の通りのリストがあるとしまして、 <dl id="hoge"> <dd>222</dd> <dd>333</dd> <dd>AAA</dd> <dd>AAB</dd> <dd>BBB</dd> <dd>BBC</dd> <dd>CCC</dd> <dd>CCD</dd> </dl> これらを以下のように数字から始まるなら「数字からはじまる」 Aから始まるなら「Aから始まる」と<dt>を入れたいと考えています。 且つそのdtにはlistという連番のIDをつけていきたいのですが、 どうjqueryで組めば良いか教えて頂けませんでしょうか。 実際どうしたいかというのは、以下のとおりとなります。 <dl id="hoge"> <dt id="list1">数字から始まる</dt> <dd>222</dd> <dd>333</dd> <dt id="list2">Aから始まる</dt> <dd>AAA</dd> <dd>AAB</dd> <dt id="list3">Bから始まる</dt> <dd>BBB</dd> <dd>BBC</dd> <dt id="list4">Cから始まる</dt> <dd>CCC</dd> <dd>CCD</dd> </dl> 英語に関しては、文字列の1番目を取得して、文字列の1番目 + 「から始まる」 といった形にしたいと考えています。 知識のある方、お力を貸して頂ければと思います。 宜しくお願い致します。

  • アンカー座標の取得ができず、スクロールしない。

    Q&Aサイトを作成しています。 Q1の答えにある「こちら」をクリックしたら、Q20の答え部分を表示させるように作成しています。 実際には質問数が多く、Q20の答え部分までスクロールさせたいので、 アンカーを設定した座標を y = obj.offsetTop; で取得しているつもりなのですが、 うまくスクロールされません。 どこが間違っているのか教えて頂けないでしょうか? よろしくお願いします。 <script type="text/javascript"> <!-- function ShowAanswer(n) { var target = document.getElementById('answerbox'+n); if( target.style.display != "block" ) { target.style.display = "block"; } else { target.style.display = "none"; } } function AnswerOpen(id_place){ obj = document.getElementById(id_place).click(); y = obj.offsetTop; scrollTo(0,y); } // --> </script> <title>TEST</title> </head> <body> <dl> <dt onclick="ShowAanswer(1)">Q1. 質問</dt> <dd id="answerbox1" onclick="ShowAanswer(1)">Q1の答え<br /><a href="JavaScript:AnswerOpen('kotae')">こちら</a>を参照してください。</dd> </dl> <dl> <dt onclick="ShowAanswer(2)">Q2. 質問</dt> <dd id="answerbox2" onclick="ShowAanswer(2)">Q2の答え</dd> </dl> <dl> <dt onclick="ShowAanswer(3)">Q3. 質問</dt> <dd id="answerbox3" onclick="ShowAanswer(3)">Q3の答え</dd> </dl> <dl> <dt onclick="ShowAanswer(4)">Q20. 質問</dt> <dd id="answerbox4" onclick="ShowAanswer(4)"><a id="kotae">Q20の答え</a></dd> </dl> </body> </html>

  • <dt>に隙間を入れる方法

    <DL class="goo"> <DT>あああ</DT> <DD>いいい</DD> <!-- この間 --> <DT>AAA</DT> <DD>BBB</DD> </DL> というHTMLを書きましたが、<DD>いいい</DD>と<DT>AAA</DT>の間を入れることがCSSでできません。どうしたら隙間をいれることができるのでしょいうか?

    • ベストアンサー
    • HTML
  • ドロップダウンメニュー(?)の作成

    <style type="text/css"> ul#menu{ overflow:auto; } ul#menu li{ width:20%; overflow:auto; float:left; } </style> <ul id="menu"> <li id="intro">ほげ1</li> <li id="member">ほげ2</li> <li id="roadmap">ほげ3</li> <li id="inquiry">ほげ4</li> </ul> よくあるタイプの横並びのものを作っていたのですが、 この度、各項目をクリックするとサブメニューが表示されるようなものを作ることになりました。そこで <!-- XHTML 2.0が対応してたらdi要素が使える。dt,ddだとちょっと書きにくい感あり--> <ul id="menu"> <li id="intro"> <dl> <dt>ほげ1</dt> <dd>ほげ1-1</dd> <dd>ほげ1-2</dd> </dl> </li> <!--(略)--> </ul> としておき、通常dtのみ(dd{diplay:none;})が表示されている状態で ddに対してのルールを加える(dd#intro{display:list-item;})Javascriptを書くことで対処しようと思いました。 問題は「別なli要素がクリックされたら、その他の要素はdisplay:none;に戻さないといけないこと。」 自分がアルゴリズムを考えると、どうも毎回ごり押し感が否めず、 li要素の数を変えたら変えたで、その度にjavascript側にフラグ用の変数を変えなければならなさそうな構成になりそうな予感です。 皆様ならどのようなソースで組むか聞いてみたいと思いました。 (ソースは・・・800文字を超えてしまい、掲載できません。補足かお礼を用います。お礼にならないかもしれませんが、ご了承ください)

  • cssのみで折りたたみまたはプルダウン

    javascriptを使わずに、IE6に対応させた 縦並びの「折りたたみ」または「プルダウン」メニューのようなものを、 いろいろやっても作れず、助けてください! ソースは以下です <dl> <dt id="Name"><a href="#">おなまえ</a></dt> <dd id="Profile">プロフィールプロフィールプロフィールプロフィールプロフィールプロフィール</dd> <dt id="Name"><a href="#">おなまえ</a></dt> <dd id="Profile">プロフィールプロフィールプロフィールプロフィールプロフィールプロフィール</dd> <dt id="Name"><a href="#">おなまえ</a></dt> <dd id="Profile">プロフィールプロフィールプロフィールプロフィールプロフィールプロフィール</dd> </dl>

  • <li>の画像およびテキストリンクのランダム複数表示

    javascriptでランダム表示する方法を教えて下さい。 サイト内に商品の一覧を作成しようと考えており、それぞれの商品画像、テキストリンクをランダムで動かしたいと思っております。 商品数は10点くらいになる予定です。 <div id="sample"> <ul>  <li>   <dl>   <dt>商品1</dt>   <dd>商品画像</dd>   <dd>商品コメント</dd>   </dl>  </li>  <li>   <dl>   <dt>商品2</dt>   <dd>商品画像</dd>   <dd>商品コメント</dd>   </dl>  </li> </ul> </div> ソースはこんな感じで、10点程の掲載予定です。 <li>~~</li>リスト10点をランダム表示する javascriptを教えて下さい。 よろしくお願いいたします。

  • フォーム内のオブジェクトを取得したい

    フォームタグ内のオブジェクトを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
  • javascriptでid要素の取得について

    お世話になります。 最近、javascriptの勉強を始めたたのですが、 以下の違いがよくわかりません。 ------------------------------------------------------- <html> <head><title>Test</titile></head> <body> <div id='wrapper'></div> </body> </html> <script language='javascript'> function aaa() { document.getElementById("wrapper").style.display = "none";//---(1) wrapper.style.display = "none"; //---(2) } </script> (2)は、document等省略してますが、その違いは無視して 頂ければと思います。 (1)でわざわざgetElementByIdを使用してid要素を取得 するメリットがわかりません。 初心者の質問で申し訳ありませんが、よろしくお願い致します。

  • css3のセレクタについて

    質問させてください。 CSS3で疑問に思っていることがあります。 たとえば、 例1) <div id="sample"> <p>サンプル1</p> <p>サンプル2</p> <p>サンプル3</p> </div> に対して、cssで #sample p:nth-cihld(3){ color:red;} とすればサンプル3だけ赤文字になると思います。 また 例2) <div id="sample"> <dl> <dt>サンプル1</dt><dd>sample1</dd> </dl> <dl> <dt>サンプル2</dt><dd>sample2</dd> </dl> <dl> <dt>サンプル3</dt><dd>sample3</dd> </dl> </div> に対して、 #sample dl:nth-cihld(3){ color:red;} とするとサンプル3 sample3が赤文字になります。 (検証ブラウザはクローム/FF/IE9・10) IE7・8はCSS3に対応していないので、赤文字になりません。 IE7・8にも対応するようにselectivizr.jsを使用します。 すると 例1はIE7・8で赤文字になりますが、例2は変化なしでした。 これはselectivizr.jsの仕様なのでしょうか。 それとも、厳密に言うとdl要素はdiv要素の子要素には当たらないのでしょうか。 腑に落ちなくてかなり時間を使ってしまいました。 ご教授いただけませんでしょうか。 よろしくお願い致します。

専門家に質問してみよう