質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

HTMLを読み込み、DOMに設定する方法

mayfil521
mayfil521

総合スコア5

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

1評価

1クリップ

2352閲覧

投稿2019/10/10 14:03

編集2019/10/11 05:53

はじめまして。
何日もかかって調べましたが、どうしてもわかりませんでしたので、
どなたかご教授お願い致します。

ローカルにあるHTMLファイルをDOMとして取得し、ソースを書き換える方法を探しています。
まず、HTMLファイルのソースを文字列として取得する方法として、下記サイトを参考にさせて頂きました。
https://www.excellence-blog.com/2018/02/02/html%E3%81%A7%E5%A4%96%E9%83%A8%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80/
オブジェクトタグのdata属性にhtmlファイル名を設定しています。

javascript

#<object id="aaatext" data="aaa.html" type="text/plain" style="display:none"></object> <script> var obj = document.getElementById("aaatext"); obj.onload = function() { var loadtext = obj.contentDocument.documentElement.textContent; alert(loadtext); } </script>

次に、文字列をDOMとして取得する方法は下記のサイトを参考にさせて頂きました。
http://donsuka-kk.hatenablog.com/entry/20140228/1393596415

javascript

( function() {"use strict"; var text = "<!DOCTYPE html>"; text += "<head>"; text += "<title>test</title>"; text += "<meta charset='UTF-8'/>"; text += "<meta name='viewport' content='width=device-width,user-scalable=no'/>"; text += "</head>"; text += "<body>"; text += "<h1>test</h1>"; text += "<div id='section1'>section1</div>"; text += "<p>これはテストです。</p>"; text += "</body>"; function getDom(txt) { var htmlDoc; htmlDoc = document.implementation.createHTMLDocument('dom'); htmlDoc.documentElement.innerHTML = txt; return htmlDoc; } function init() { var target = document.getElementById('target'); target.innerHTML = '初期値'; var DOM = getDom(text); console.log(DOM); target.innerHTML += DOM.getElementById('section1').textContent; } if (document.body) { init(); } else { document.addEventListener('DOMContentLoaded', init, false); } }());

上記の text +=の部分を最初のソースにあるloadtextに置き換えてみたのですが、上手く行きません。
IEではalert(loadtext)できちんとソースコードが表示されています。
どのようにcreateHTMLDocumentの引数に設定したらよいでしょうか?

10/11追加
以下が実際に書いたコードです。

javascript

<html> <head> <title>test</title> </head> <body> <object id="ob1" type="text/html" data="sample.html"> </object> <script type="text/javascript"> var obj = document.getElementById("ob1"); obj.onload = function() { var loadtext = obj.contentDocument.documentElement.textContent; //var loadtext = obj.contentDocument.documentElement.outerHTML console.log(loadtext); } function getDom(txt) { var htmlDoc; htmlDoc = document.implementation.createHTMLDocument('dom'); htmlDoc.documentElement.innerHTML = txt; return htmlDoc; } var DOM = getDom(loadtext); console.log(DOM.getElementById('ichiran').textContent); </script> </body> </html>

miyabi_takatsuk 様
dodox86 様
m.ts10806 様(タグ追加の手続きは自分ではできないようですので、後程行います)

ご指摘ありがとうございます。投稿内容修正いたしましたのでご確認のほどよろしくお願いいたします。

Chromeで開いた状態で以下のエラーです。

getDom(text)のところで loadtext is not defined というエラーがでます。

documentElement.textContent;のところで documentElement' of null というエラーがでます。

IEではalertはでますが、console.logが表示されません。

ご教示のほどよろしくお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

miyabi_takatsuk

2019/10/10 15:46 編集

コードはコードブロックにて記載してください。 <code>ボタンで挿入される ``` ここにソースコード ``` とします。 さて、うまくいかないだけでは何もわかりません。 何がどううまくいかないのかを記載ください。 そして、コンソールに何かエラーがでていませんか? (状況から察するに、100%何かしらのエラーがでてるはず) Google Chromeで開いている状態で、F12を押すと出てくる、デベロッパーツールの中に、コンソールログを見ることができる画面がありますので、 そこを見てまずはエラーがでていないか確認し、 質問本文に記載しましょう。 質問は編集できます。
m.ts10806

2019/10/10 23:22

タグはHTMLだけでは不足しているように見受けられます。過不足なく適切に設定してください

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。