Q&A
何がしたいのかよく分かりませんが、こういうことでしょうか？
var ps = document.querySelectorAll('p');
for (var p of ps) { p.innerText = 'p'; }
javascriptでHTMLの要素をブラウザに表示する方法を考えています。
例えば<p>というタグがHTMLに存在したらそれをブラウザでpという文字だけ表示させるといったことを行いたいです。
調べてきた中でdocument.getElementsByTagName("p")を使えば<p></p>を使えば中身を編集することができる方法はよく見受けることができましたが、要素そのものを表示させるといったものは見つけられなく困っています。参考になるサイトとかあったら些細なものでもいいのでよろしくおねがいします。
このように回答者側に「本当にやりたいこと」が伝わっていないので、伝わるように説明をお願いしたところです。
具体例として、「入力となるHTML」と「それをどこへどのような形で出力するか」を提示していただけないでしょうか？
HTMLの要素をブラウザにテキストとして表示するだけです。
HTMLファイルに<p>というタグが存在したらそれをブラウザにテキストとしてpだけ表示するだけです。
> ブラウザにテキストとしてpだけ表示するだけです。
・同じブラウザ内ですか？別タブですか？
・出力先はブラウザの「どこ」ですか？（console.logなら何も考えなくていいのですが、HTML内に出力するとなると「出力先の要素」をどこにするのか、そしてそれ自体は表示対象に含むのか、など複雑な問題が生じます）
同じブラウザ内です。document.write()で表示できなくて困ってます。
今はとりあえずブラウザのどこでもいいです。
ページに表示させれば今はそれでいいです。
回答3件
0
全てのHTMLElementはchildrenプロパティを持っていて、自分の子要素を全て参照できます。
bodyからchildrenプロパティの中身を追っていけば全ての要素を追いかけることができます。
例えば、このページの現在のbodyからの子要素を以下のように取得できます。
javascript
1 document.body.children
結果：
HTMLCollection(78) [script#teratail-datalayer-variables, script, noscript, script, header#header.l-header.j-questionDetailMoveToReplySubtract, div#shortNotification.L-shortNotifications, div.row-fluid, div#container.l-container.l-container--qaDetail.clearfix, footer#footer, script, script, script, script, div.C-simpleModalBackground.j-simpleModalWrapper, div#divReport, script, script, script, div.C-simpleModalBackground.j-simpleModalWrapper, script, script, img, script, script, script, div, script, script, iframe, iframe, script, script, script, script, img, iframe, iframe#google_osd_static_frame_9841291665357, script, script, script, iframe, script, img.imPageviewImgBcn, iframe, iframe, div#fb-root.fb_reset, script, noscript, img, img, div, script, script, script, script, iframe, script, script, div, div, script, div, script, div, div, div, script, img, script, script, img, img, img, script, img.imPageviewImgBcnV2, script, div, script, teratail-datalayer-variables: script#teratail-datalayer-variables, header: header#header.l-header.j-questionDetailMoveToReplySubtract, shortNotification: div#shortNotification.L-shortNotifications, container: div#container.l-container.l-container--qaDetail.clearfix, footer: footer#footer, …]（長いので省略）
このHTMLCollectionの中身を順番に取得し、さらにchildrenで子要素を探索することで全ての要素そのものが取得可能です。
要素中の何が取得できるかはドキュメントを参照していただければ。
https://developer.mozilla.org/ja/docs/Web/API/Element
投稿2021/06/05 16:14
総合スコア4447
ありがとうございます。
もう一つ質問でそれを任意のHTMLのブラウザにその取得した要素を表示するにはどうしたらいいのでしょうか?できれば簡単な例を出してくださると助かります。
本文もコメントでの発言もそうですが、質問文から本当にやりたいことが伝わって来ません。説明不足です。
「任意のHTMLのブラウザ」って何でしょうか。また、「期待している状態」も質問文から読み取ることができません。
自力で試したコードも書かれていないのでどの程度試行錯誤したのかも分かりません。簡単な例を出せと書かれていますが「期待している状態」が分からないので適切なサンプルも出せません。
・目指している動作、状態、結果を分かりやすく説明すること
・自身で書いたコード
くらいは最低限提示しましょう。
あなたの説明では探索しかできていないんです。(出力できていないので探索できているかわからないですが)
したいことは、その探索したものを読み込んだHTMLをブラウザに表示するといった操作です。自分が試したのはdocument.write();では表示できなかったので他の方法を教えてもらえないでしょうか?
試行したコードがあるのであれば質問本文に追記しましょう。
繰り返しますが、「探索したものを読み込んだHTMLをブラウザに表示するといった操作」という説明では、「期待している状態」がわかりません。質問の追記、補足要求コメントは読まれましたか。コードを書かれている方がいらっしゃいますが、そのコードがあなたの期待する状態を再現できるのでしょうか。
違うのであれば、あなたが求めているゴールの状態がこの質問を見ている人に伝わっていないのです。
説明は何も言葉だけでやらなければいけないわけではありません。図を作って「このような状態にしたい」と説明しても良いのです。文章で説明が難しいのであれば図解で説明しましょう。
だから、要素をブラウザに表示するだけです。
あなたが考えているよりはるかにすることはシンプルです。
これごときに図などいらないです。
要素の文字を表示させるだけです。
0
HTMLファイルに<p>というタグが存在したらそれをブラウザにテキストとしてpだけ表示するだけ
document.write()で表示できなくて困ってます
こんな感じですか。
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5</head> 6 7<body> 8 <p></p> 9 <script> 10 document.write(document.getElementsByTagName('p')[0].tagName) 11 </script> 12</body> 13 14</html>
投稿2021/06/09 05:29
総合スコア36138
0
Element.outerHTMLで取得できます。これを出力すれば良いです。
html
1<p id="test">あああ</p> 2<script> 3var content = document.getElementById("test").outerHTML; 4console.log(content); // <p id="test">あああ</p> 5</script>
投稿2021/06/06 01:07
編集2021/06/06 01:11
総合スコア784
あなたの回答
tips
プレビュー
