DOMParserでtext/htmlからオブジェクトに変換したHTMLファイルのタグの要素・属性を取得したい

■やりたいこと
sumple2.htmlのファイル選択ボタンからsumple1.htmlを選択し、GOボタン押下後にsumple2.htmlのspanタグの部分にsumple1.htmlのテキストボックスの値を表示させたいです。

■できないこと
sumple2.htmlのspanタグにテキストボックスの値が表示されません。
「getElementById」などを使っても表示されませんでした。

■質問
オブジェクトへのアクセスの仕方が間違っているのでしょうか？
または、DomParserで変換したオブジェクトの場合、要素やその属性は取得できないのでしょうか？

拙いコードで申し訳ありませんが、よろしくお願いします。

sumple1.html

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta http-equiv="X-UA-Compatible" content="IE=11">
5    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
6    <title>sumple1</title>
7    <style type="text/css">
8  </head>
9      <body>
10    sumple1<br>
11      <input type="text" id="sumpleTextBox" value="こんにちは">
12  </body>
13</html>
14

sumple2.html(JavaScriptも記載されています)

html
1<!DOCTYPE html>
2<html>
3	<head>
4	<title>sumple2</title>
5	</head>
6	<body>Select file.
7		<input type="file" id="targetTextFiles" size="50">
8		<input type="button" value="GO" onClick="getTextFile('shift_jis')">
9		<span id="view_text1"></span>
10		<script type="text/javascript">
11			function getTextFile(encd) {
12				var myFile = document.getElementById("targetTextFiles").files[0];
13				var reader = new FileReader();
14
15				reader.onload = function(evt){
16					var txt = evt.target.result; 
17					txt = txt.replace(/</g, "&lt;"); 
18					txt = txt.replace(/>/g, "&gt;"); 
19					txt = "<p>MIME : " + myFile.type + "</p><pre>" + txt + "</pre>";
20			
21					var docText = new DOMParser();
22			
23					try {
24						var domParseObject;
25						domParseObject = docText.parseFromString(txt, "text/html") 
26					}catch(e){
27					}
28					document.getElementById("view_text1").innerHTML = domParseObject.body.getElementById("sumpleTextBox");//ここで要素を取得して画面に表示させたい
29				}
30				reader.readAsText(myFile, encd);
31			}
32		</script>
33	</body>
34</html>

行動規範の内容に同意します

回答1件

ベストアンサー

開発者ツールのコンソールにエラーが出ているはずです。

javascript
1document.getElementById("view_text1").innerHTML = domParseObject.body.getElementById("sumpleTextBox");

domParseObject.body の型は HTMLBodyElementで、getElementById() というメソッドはありません。

domParserObject が Documentなので、getElementById() を持っています。

javascript
1document.getElementById("view_text1").innerHTML = domParseObject.getElementById("sumpleTextBox");

投稿2021/02/28 16:37

int32_t

総合スコア21679

marosu

2021/02/28 22:10

ありがとうございます。オブジェクトの型の理解不足でした。エラーは発生しなくなりましたが、domParserObject.getElementById()がnullを返してしまいます。 idのスペスミスなどはないのですが、これは何故なのでしょうか？

marosu

2021/02/28 23:15

sumple2.htmlの txt = txt.replace(/</g, "<"); txt = txt.replace(/>/g, ">"); を消したらdomParserObject.getElementById()が正しい値を返してくれるようになりました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

DOMParserでtext/htmlからオブジェクトに変換したHTMLファイルのタグの要素・属性を取得したい

関連した質問