gooポイントが当たる質問投稿キャンペーン>>

変数に入っているHTMLから
特定のidのDIVから、そのDIV閉じまでを取得したいのですが、
良い方法が思いつきません・・・。

***.getElementsById(***);は、変数には使えないようですし・・・
かといって、変数の内容を、表示されているHTMLにぶちこんでから
document.body.getElementsById(***);するのも気がすすみません・・・。

繰り返しと、正規表現のマッチを使って、
目的の<div="***">までの回数とその文字位置をかぞえ、
同じ回数目の</div>の文字位置を調べ、
切り取るというのも考えましたが、それは考えがあまかったようで・・・うまくいきませんでした。

例えば・・・bodyというidのDIVを取得したいとして・・・
次のようなソースだとすると、あたりまえですけどうまくいきません。
<div id="body">
<div id="a">
テスト1
</div>
<div id="b">
テスト2
</div>
</div>
<div id="footer">
テスト3
</div>

何か良い方法がありませんでしょうか・・・。
みなさんのお知恵をお貸し下さい。どうかよろしく御願いします。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

こういうやり方が正しいかどうかわかりませんが。


<!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>

この回答への補足

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

補足日時:2009/01/09 23:56
    • good
    • 0
この回答へのお礼

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

お礼日時:2009/01/09 21:33

修正だけですが



function getNodeById(n, nid){
return n ? n.id == nid ? n : getNodeById(n.nextSibling, nid) || getNodeById(n.firstChild, nid) : null;
}

#4 TEXT_NODE → non child & non nextSiblng → parentNode → childNode(TEXT_NODE) → non child & non nextSiblng → ...
    • good
    • 0
この回答へのお礼

ありがとうございます!!
今のところ、yuu_xさんのもので正常に動いているようです。
感謝です。

お礼日時:2009/01/13 10:59

役に立てないね~;_;


bodyに追加してみて正常に機能するか?
するのならば、display:hidden;のオブジェクトに追加して
にごす。

もしくは、ハイレベルの人の回答を得るため、新たに立ち上げる。

もしくは、HTMLの中にidをふって、getNodeByIdの関数の中にr.idを表示させてすべてチェックする

もしくは、id="body"をやめる^^;

あぁ~ なんもいえねぇ~;_;
    • good
    • 0
この回答へのお礼

返信が遅れましてすみませんでした。
今のところ、yuu_xさんの回答で成功しましたが、
こんな質問に付き合っていただいた_pipi_さんにも本当に感謝しております。
本当にありがとうございました。

お礼日時:2009/01/13 10:58

変数のなかのHTML構造がおかしいとか・・・。

この回答への補足

Firefoxでは、Firebugに。
GoogleChromeでは標準搭載の、デバッグ(JavaScript Debugger)に
console.logで、ログを出力させてみたのですが・・・。

GoogleChromeでは次のように出ました。
"[object HTMLDivElement]," source: http://localhost:8080/ (0)
"[object Text]," source: http://localhost:8080/ (0)
"[object HTMLDivElement]," source: http://localhost:8080/ (0)
しかし、FirefoxのFirebugでは・・・
<div>
"\n\n"
<title>
"ページ1"
"ページ1"
"ページ1"
...
のようになってしまっています。
その目的のHTMLに記述された<h1>ページ1</h1>というタグだと思います。
ログは、以後、ずっと、"ページ1"になってしまっています。

スクリプトのgetNodeByIdは次のようにしました。
function getNodeById( node, nid ){
var r = node;
count = 0;
console.log(r);
while(count <= 60){
count = count + 1;
r = getNextNode( r );
console.log(r);
if( r.id == nid ){
break;
}
}
return r;
}

何か、わかりませんでしょうか。

補足日時:2009/01/10 17:58
    • good
    • 0
この回答へのお礼

HTMLが特におかしいような気はしないのですが・・・。
試してみた所、InternetExplorer7と、GoogleChromeでは正常で、
FirefoxとOperaでは無限ループになってしまいました...
謎です・・・。

お礼日時:2009/01/10 17:24

変数に入っているのはただの文字列なので、その内容がHTML形式だったとしても、HTMLとして認識されることはないでしょう。


基本的には、文字列処理でやるのが正論では?

正規表現は苦手なのですが、ご提示のソース程度に限定したら…
window.onload = function(){
var hoge = document.getElementsByTagName('body')[0].innerHTML;
var fuga = hoge.match(/<div id="?body"?>[^<]*((<div[^>]*>[^<]*(<[^d][^>]*>[^<]*)*<[/]div>)*[^<]*)*<[/]div>/i);
alert("[[ body ]]\n" + hoge + "\n\n[[ match ]]\n" + (fuga?fuga[0]:'no match'));
}
簡略化しているので、<div>がさらにネストしていたり、dで始まる<dt><dl>タグなどがあると↑では検出できません。
(もっと、きちんと表現する必要がありますが、苦手なもので…)
実際には、<div id="body">が、<div id='body'>だったり、<div id="body" >(スペースが多い)とかも考えていくと面倒ですね。


あとは、質問者様がすでに書かれていますが、HTMLに吐き出しておいてドキュメントとして扱う方法くらいでしょうか?
window.onload = function(){
var hoge = document.getElementsByTagName('body')[0].innerHTML;
var fuga = document.createElement('div');
fuga.style.display = 'none';
fuga.innerHTML = hoge.replace('body','bady');
document.body.appendChild(fuga);
fuge = document.getElementById('bady');
alert("[[ body ]]\n" + hoge + "\n\n[[ match ]]\n" + fuge.innerHTML);
document.body.removeChild(fuga);
}

同じものを書くので、↑では、後のものはidをbadyに変えています。実際には同じものを2重書きするわけではないでしょうが、それでもidの一意性が損なわれる可能性は高いですね。
これだと通常のHTMLの扱いにできるので、DOMで扱えますね。
idの重複を避けるためにはiframeでも使うのかなぁ…
    • good
    • 0
この回答へのお礼

ありがとうございます。
やはり、変数はただの文字列ですよね^^;
結局、HTMLに一時的に吐き出すほうが、一番使えそうですね・・・。

お礼日時:2009/01/09 21:29

var div = document.getElementById('body');


child_div = div.getElementsByTagName('div');
for(i=0;i<child_div.length;i++){
alert(child_div.item(i).id);
}
こういう事じゃなくてですか?
いまいち、何が分からないのかが分かりません^^;
    • good
    • 0
この回答へのお礼

すみません。うまく動かないのですが・・・
getElementByIdや、getElementsByTagNameは、変数に対しても使えるのですか??

お礼日時:2009/01/09 13:15

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTMLDivElement等の比較、評価について

記述の HTML コード div、p タグに、同じクラス属性値 abc が付いています。
あくまで例として記述したものですが クラス属性値 abc で div の場合はアラート OK!
が表示されるようにしたいのですが、if 中で、div=[object HTMLDivElement]とでは、違う為、
アラート OK!とはなりません。

どのようにすれば if 中で評価出来るようになりますでしょうか ?

みなさま、どうぞご回答よろしくお願いいたします。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Test</title>
</head>

<body>
<div class="abc"></div>
<p class="abc"></p>

<script>
var tags = document.getElementsByClassName( 'abc' );
var targetTags = 'div';

for( i = 0; i < tags.length; i++ ) {
if( targetTags.indexOf( tags[i] ) == 0 ){ alert( 'OK!' ); }
}
</script>

</body>
</html>

記述の HTML コード div、p タグに、同じクラス属性値 abc が付いています。
あくまで例として記述したものですが クラス属性値 abc で div の場合はアラート OK!
が表示されるようにしたいのですが、if 中で、div=[object HTMLDivElement]とでは、違う為、
アラート OK!とはなりません。

どのようにすれば if 中で評価出来るようになりますでしょうか ?

みなさま、どうぞご回答よろしくお願いいたします。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...続きを読む

Aベストアンサー

個々の要素をチェックしているので、tagNameやnodeNameで直接確認するのが手っ取り早いでしょう。
  if(tags[i].nodeName === "DIV" ){ alert( 'OK!' ); }
とか。

QタグIDに変数を用いる

ASP.NETでWIB開発をしております。
ツールはWeb Veveloper 2010 を仕様しています。

DBから値をn件取得し、表を表示。この表はLavelのtextを
html文字列で書き換えて表示しています。

-------------
String1 □     : ←<id="checkbox1 value="String1" onclick="xxx()"....
String2 □     : ←<id=checkbox2 value="String2".onclick="xxx()"....
Srring3 □     : ←<id=checkbox3 value="String3" onclick="xxx()"....
-------------
    [決定]

決定ボタンが押された時に、JavaScriptをよび、
その中で
checkbox1~3までのチェック済みのチェックボックスをカウントする
ロジックを次のようにかいています。

var count = 0;
var lines = 3;
var kensu = 0;
while(count < lines){
count +1;
if (form1.checkbox[count].checrd == true){   /※
/チェックされていた場合の処理
kensu=kensu+1;
}
}

checkboxのID値の、固定部分に、変数をくっつける事で、
n個のチェックボックスのチェック有無確認を行いたいとおもうのですが、
実行しますと※行で「メンバーでない」エラーが出てJavaScriptが止まります。
(以前は出来ていたのですが)

どうすればタグIDにカウントアップ変数を追加し、
連続して"同名のタグ名+数字"を参照する事ができるのでしょうか。
これはもしかしたらJavaScriptではなく、ASP.netの範疇の質問かもしれませんが
何卒よろしくお願いします。

ASP.NETでWIB開発をしております。
ツールはWeb Veveloper 2010 を仕様しています。

DBから値をn件取得し、表を表示。この表はLavelのtextを
html文字列で書き換えて表示しています。

-------------
String1 □     : ←<id="checkbox1 value="String1" onclick="xxx()"....
String2 □     : ←<id=checkbox2 value="String2".onclick="xxx()"....
Srring3 □     : ←<id=checkbox3 value="String3" onclick="xxx()"....
-------------
    [決定]

決定ボタンが押された時に、Jav...続きを読む

Aベストアンサー

formにcheckboxプロパティはないと思います。

id がそれぞれに振ってあるので、それを使った場合は次のような感じです。

var i = 1;
var lines = 3;
var kensu = 0;
var checkbox;

for(;i<=lines;i++){
checkbox=document.getElementById('checkbox'+i);
if (checkbox.checked){ 
kensu++;
}
}

参考URL:https://developer.mozilla.org/en-US/docs/DOM/HTMLFormElement

QjQueryでクリックされた要素のidを関数で取得

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.alphabet').click(function(){
function alertAlphabet(){
alert($(this).attr('id'));
};
alertAlphabet();
});
});
</script>

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">...続きを読む

Aベストアンサー

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQueryオブジェクト
alert(obj.attr('id'));
};
</script>
</head>
<body>
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
</body>
</html>

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQu...続きを読む


人気Q&Aランキング