htmlでのテキストの読み込みについて(DOM操作)

htmlにてobjectタグを使い外部テキストファイルを表示させた場合
どのようにDOM取得すれば良いですか?
index.html ↓

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>
<div>
<object data="data.txt" type= "text/html" id= "csv" name ="csv">
</object>
</div>
   <script type="text/javascript">
      var ary = document.getElementsByTagName("pre");
      aryLength = ary.length;
      for(var i=0;i<aryLength;++i){
        console.log(ary[i].innerHTML);
      }
</script>
</body>
</html>

テキストファイル(data.text)↓

abcdefghijk

ブラウザでチェックしたところ
abcdefghijkは表示されますが
console.log がundefindになってしまいます
(abcdefghijkをログに出したい)

kei344

2017/03/03 14:59

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

auto_miss56

2017/03/03 23:35

失礼しました。ファイル全文載せました。

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

回答2件

ベストアンサー

XMLHttpRequest で取得してみては？

（追記：参考リンクの一つを削除）

【XMLHttpRequest - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

【DOMParser - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/DOMParser

投稿2017/03/04 16:29

編集2017/03/05 02:28

kei344

総合スコア69407

kyunta

2017/03/05 00:50

kei344さん、おはようございます。私もXMLHttpRequestと思ったのですが、非同期のため最初に提示したコードを修正しないといけなかったので、コピペだけで後はファイルパスの変更だけのサイトを紹介させて頂きました＾＾；それとkei344さんが紹介されているサイトのコードなのですが、このコードでMacなどでは動作するのでしょうか？ var e = document.getElementById("*"); for (var i = 0, j; j = e[i]; i++) { getElementByIdはエレメントのリストは返さないと思っていたので、私の環境（windows10,edge,chrome)で検証してみたのですが動作しなかったので他では動作するのでしょうか？因みにvar e = document.getElementById("*");で最初の１つは取れるのかなとも思ったのですがダメでした。

kei344

2017/03/05 02:25

> このコードでMacなどでは動作するのでしょうか？ああ、よく見ると不思議なことをしていますね。XMLHttpRequest とファイルを対象にしている部分しか見ていませんでした。 document.getElementById("*"); を document.queryselectorall("*"); とかに読み替えないと全く動かないでしょうね。というかクラスを採るだけなら document.queryselector(".signature"); で良いし。例示したものがあまりにもなのでリンクをはずしておきます。指摘ありがとうございます。

kyunta

2017/03/05 04:01

kei344さん、ありがとうございます。多くの環境を熟知していないので(というか極限られた環境しか知らないので＾＾；)、こういう環境もあるのかなと質問してしまいました。ご回答ありがとうございました。

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

getElementByTagNameはsが抜けています。getElementsByTagName
preがどこにあるのか分かりませんが、配列で返りますからそれなりに処理します。
参考までに。

「追加」
こちらのサイトのコードを拝借してファイルを読み込んでみてはどうでしょうか。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <pre>abc</pre>
    <pre>def</pre>
    <pre>ghi</pre>

    <script type="text/javascript">
      var ary = document.getElementsByTagName("pre");
      aryLength = ary.length;
      for(var i=0;i<aryLength;++i){
        console.log(ary[i].innerHTML);
      }
    </script>
  </body>
</html>

投稿2017/03/03 22:28

編集2017/03/04 00:14

kyunta

総合スコア350

auto_miss56

2017/03/03 23:26

>>getElementsByTagName preがどこにあるのか分かりませんがすいません説明が抜けておりました <object>タグを記述するとブラウザレンダリング時に#documentが呼び出され構造は <html><head><body>...となり .txt内容は<pre>タグに挿入され表示されます

kyunta

2017/03/04 00:09

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

あなたの回答