フォームの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>
---------------------------------------------------------------------
No.2ベストアンサー
- 回答日時:
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 ともに成功
*/
回答有難うございます。
DOMツリー化できるんですね!!!
やってみると、私の方でも取得できました。
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<div>のタッチ状態を維持したま...
-
jQueryでシンセサイザーを作っ...
-
読み込んだQRコードをフォーム...
-
jsonテキストデータの並び替え...
-
jQueryで同じクラス名のものを...
-
セレクトを全て選択されていな...
-
階層別の組織図の自動作成について
-
出発駅A、到着駅Bを選択すると...
-
IndexedDB を使ってファイルア...
-
初心者です。gulpでコンパイル...
-
jsで質問です。 ボタンが二つ存...
-
スマホ上で、左右スワイプで次...
-
GASに文字列として関数を入れる...
-
フォームが空欄の時にフォーム...
-
画像の表示位置
-
変数宣言と初期値代入の場所に...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptがoffだったらどっか...
-
海外の時間をホームページ上に表示
-
ホームページ内検索をフォーム...
-
【JavaScript】特定の条件で特...
-
JavaScriptからPerlへデータを...
-
JavaScriptを使用してマルチラ...
-
確認ダイアログを表示出来ない
-
【javascript】 IMEのカタカナ...
-
javascriptとcookieの判定とペ...
-
簡易版パスワード入力画面について
-
URL変更2
-
宜しくお願いします。
-
HTMLの取得と解析について
-
チェックボタンをクリックする...
-
pythonにおける単方向リストの...
-
パスワードを二つ用いて隠しペ...
-
カンマ区切り形式ではなく、セ...
-
キングファイルの背表紙を作成...
-
パワーポイントで参照ページを...
-
<IFRAME>でコンテンツ部分のみ...
おすすめ情報