HTMLの取得と解析について

解決済

質問者：googleoooo
質問日時：2011/12/07 15:50
回答数：2件

フォームの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">

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： e_watt
回答日時：2011/12/08 07:50

textareaの内容を、ダミーの要素に突っ込めば DOM ツリーの中に入りますね。

（下の例では createElemetしましたが、<div id="scratchPad" style="display:none">
　などの要素を予め用意してもok）

function test() {
var buf = document.createElement('div');// ダミーの要素を生成して
buf.innerHTML = document.form1.src.value;// 貼りつけた内容を突っ込む

elm = buf.getElementsByTagName('table')[0];// （注：[0]で最初のTABLEだけを拾ってます）

dv = document.getElementById('test');// ここに結果を入れる…のだけど
if (window.navigator.userAgent.toLowerCase().match("firefox")) {
dv.removeChild(dv.childNodes[0]);// どんどん増えるとまずいのでremoveChildしておく
dv.appendChild(elm);// 子要素として追加
}else{
dv.innerHTML = elm.outerHTML;// 貼り付け
}
}

/*
　上記 if A else B について、
　　Firefox 8.0 では A のみ成功
　　IE 8.0 では B のみ成功
　　Google Chrome 15.0, Opera 11.52 は A, B ともに成功
*/