• ベストアンサー

変数に入っているHTMLから特定のidのDIVの範囲を取得したい

noname#84373の回答

  • ベストアンサー
noname#84373
noname#84373
回答No.3

こういうやり方が正しいかどうかわかりませんが。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <title>Test</title> <body> <script> var n; var ht='<div><div id="boody"><h3>abc</h3><p>abcdef</p></div><div>fghj</div></div>'; var node = document.createElement('DIV'); node.innerHTML = ht; if( n = getNodeById( node, 'boody' ) ) alert( n.innerHTML ); function getNodeById( node, nid ){ var r = node; while( r = getNextNode( r ) ) if( r.id == nid ) break; return r; } function getNextNode( node ){ if( !node ) return null; if( node.hasChildNodes() ) return node.firstChild; if( node.nextSibling ) return node.nextSibling; return getNextNode( node.parentNode ); } </script>

masapiyochan
質問者

お礼

ありがとうございます。 私も正しいか正しく無いかはわかりませんが、 _pipi_さんがご回答いただいたもので、十分いけそうです。 ありがとうございました。

masapiyochan
質問者

補足

すみません。Firefoxで・・・それ単体では動作するのですが、 私が書いたソースに組み込むと、うまく動かなくなります。 (いつまでもループになってしまいます。) 指定回数でループから抜けるようにしてみたところ、結果がundefinedになっていました。 GoogleChromeなどではごく正常に動作したようです・・・。 何か、そうなってしまう理由として思い当たるようなことがあったら、教えていただけるとありがたいです。

関連するQ&A

  • Ajax的な手法で取得したHTMLの表示

    いつもお世話になっております。 XMLHttpRequestで非同期に取得したHTMLをポップアップのように表示させたいのですが、方法がよくわかりません。 <div id="popup"> THIS IS AJAX TEST!! </div> というテキストが取得できるとしたらこのテキストはHTMLとしては認識されていないのでしょうか? pop = document.getElementById('popup'); document.body.appendChild(pop); とやれば表示されるかと思いましたがうまく行きません。 下手な質問になってしまいました。。とにかく、非同期で取得したHTML をJavascriptから操作する方法を教えていただけると嬉しいです。

  • HTMLのdivについて

    HTMLで質問です。 DIVについて質問です 下の図で <body> <div="c"> <div id="a"> --------------- </div> <div id="b> ああああああああ いいいいいいい </div> </div> </body> という場合 <div=”c”> は全体のbody範囲でありますが divそのものを idで指定しなくても divだけでも全体を範囲しいた事にはならないのでしょうか? ホームページ全体が範囲であり セレクタ範囲を後にCSSで装飾する場合 やはりIDで指定するのでしょうか?

  • <div ~ </div> で囲まれたテキスト文字を取得する方法はあり

    <div ~ </div> で囲まれたテキスト文字を取得する方法はありますか? 「 <div class="TEST" id="TEST">?</div> 」 上記のような、?部分の表示内容によって、処理を分けたいのです。

  • HTML id名とjavascript変数名

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>test</title> <script type="text/javascript"> window.onload = function() { console.log('test' in window); test.addEventListener('click', function() { alert('click') }, false); }; </script> </head> <body> <div id="test">test</div> </body> </html> 何かすごい勘違いをしていたらお恥ずかしいのですが、 上のコードFIREFOX以外(IE、Chrome、safari)'true'でtestをクリックするとalertが 出るのですが、これって自動的にid名がグローバル変数になってるって ことなのでしょうか?? id名と同じ名前で変数を宣言していて、ぶち当たりました。 どうぞよろしくお願いいたします。

  • HTMLの取得と解析について

    フォームのtextareaにHTMLを入力して、そこから必要なタグを取得したいのですが上手くいきません。 textareaの値は取得できています。 textareaの値からgetElementsByTagNameを使用してtableタグを取得しようとしているのでがエラーが出ます。 chromeによると Uncaught TypeError: Object ・・・・ has no method 'getElementsByTagName' 取得した値をgetElementsByTagNameにほり込むのが間違ってるような気もするのですが、良く分かりません。 テキストエリアに入力したHTMLをパースして、再利用する良い方法がありましたらご教授ください。 以下に現状のソースを書かせて頂きます --------------------------------------------------------------------- <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> <!-- function test() { var org_src = document.form1.src.value; table = org_src.getElementsByTagName('table'); document.getElementById('test').innerHTML = org_src; } // --> </script> </head> <body> <p>自動出力</p> <form name="form1"> <p>テキストエリアにソースを張り付けて下さい</p> <p> <textarea id="src" rows="5" cols="30"> </textarea> </p> <p> <input type="button" value="実行" onClick="test()"> </p> </form> <div id="test"> </div> </body> </html> ---------------------------------------------------------------------

  • <DIV id=""></DIV>勘でいれたら・・・

    はじめまして。JavaScript初めてです。 わからないことがあるので、教えてください。 画面を左右にフレームで分割して、左フレームのリストボックスから要素を選択すると、その要素に該当した表が右フレームに表示される、というものを作成しました。 左フレーム:name = index 右フレーム:name = main こんな感じ(左フレーム)↓ <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function disp(obj){ 右フレームの表のHTML作成をしている parent.main.document.open(); parent.main.document.write (desc.innerHtml = 上で作成したHTML); parent.main.document.close(); } --> </SCRIPT> </HEAD> <BODY onload="disp(form)"> ※<DIV id="desc"></DIV> <FORM name="form"> <SELECT name="MListBox" onchange="disp(form)"> <xsl: apply-templates select="~"/> </SELECT> </FORM> *<DIV id="desc"></DIV> </BODY> </HTML>   ・   ・ <xsl文章>   ・ 初めは、※←のところがなく、右と左のフレーム両方に表が出力されてしまっていました。でも※←のところに<DIV id="desc"></DIV>を勘で入れたとたん、右フレームだけに表が出力されるようになりました。(期待の結果) 自分の予想では、*←のところのみで期待の結果が得られる予定で、(disp()でHTMLの出力を右フレームに指定しているから)何故※のところを追加したことで期待通りの動きをしたのかが謎です。 わかりづらい説明で申し訳ないですが、教えてくださる方がいらっしゃいましたら、どうぞお願いします。

  • html内に <div id"test">があり、このtestというi

    html内に <div id"test">があり、このtestというid名をjavascriptで変更するにはどうすればいいのでしょうか?このhtml内には普通一度しか使用しないid名が何度が記述され、そのid名をたとえばtest0やtest1のように変更するjavascriptを作りたいのですが、 <div id"test"><p>あ</P></div> <div id"test"><p>い</P></div> <div id"test"><p>う</P></div>を <div id"test0"><p>あ</P></div> <div id"test1"><p>い</P></div> <div id"test2"><p>う</P></div>のように document.getElementsByTagName("div")[0].id;でタグ名は取得できるのかもしれませんが、<div id"test">の前後にはいくつか<div id"test">以外のdiv id が存在するとお考え下さい。 どなたか、詳しくわかる方お教えください。

  • 取得したidから文字を削除

    <div id="test123">test123</div> <div id="sub123">sub123</div> <div id="test321">test321</div> <div id="sub321">sub321</div> .id.match(/^test[0-9]+$/) でtest+数字のidを格納するのですが 格納したid、 例えばtest123からtestの部分を削除して数字だけ格納したいのですが どうするのでしょうか? subの操作もするので削除したいのです。

  • 変数内でHTMLを使用したいです

    自分なりにいろいろ試してみたのですが出来なかったので、お教えいただきたいと思い、質問させていただきます。 現在、perlを使ってCGIを組んでいます。 (というよりは組まれていたCGIを編集しています) その中で、外部から入力された文字列データを変数に格納し それをprintで書き出しています。 以下のような形です。 -------------------------------------------------- open(IN,"$datfile"); while (<IN>) { my ($no,$date,$name,$comment,$ip) = split(/<>/); print "<div class=\"line_wrap\">"; print "<div class=\"line_left\">$date</div>"; print "<div class=\"line_right\">$comment</div>"; print "</div>"; } close(IN); -------------------------------------------------- なんとなくでしか理解できてないのに編集したのでおかしい部分もあるとは思いますが・・・。 今回お伺いしたいのは $comment という変数内に、HTMLタグが入っていた場合、そのままの状態で吐き出されてしまうことになり困っています。 変数内の文字列に記載されているHTMLを、HTMLとして認識して実行したいのですが(要はリンクを貼りたい)可能でしょうか? 外部から入力されているものですので、HTMLがあったりなかったりします。 何か方法があれば、教えていただきたいです。 よろしくお願い致します。

    • ベストアンサー
    • Perl
  • HTMLのソースの取得・正規表現

    プログラム自体始めて間もない初心者です。 javascriptでHTMLのソースを取得して、正規表現でマッチしたURLを書き出したいと思います。 取得したソースから正規表現で抽出はできましたが、さらに手を加えると機能しませんでした。 下記test-1では「http://abc.com/」と表示されましたので思った通りに動きました。 しかし、test-2では「http」と表示されると思っていたところ、表示されませんでした。 この違いはなんでしょうか? //////////////////// test-1 <html> <head> <script type="text/javascript"> function test(){ aaa = document.getElementsByTagName("html")[0].innerHTML; bbb = aaa.match(/http:\/\/abc\.com\//); document.write(bbb); } </script> </head> <body> <input type="button" onclick="test()"> <a href="http://abc.com/"> </body> </html> //////////////////// test-2 function test(){ aaa = document.getElementsByTagName("html")[0].innerHTML; bbb = aaa.match(/http:\/\/abc\.com\//); ccc = bbb.match(/http/); document.write(ccc); }