Q&A
前質問の「DOM木を作ってそれをホームページに出力する作業」と同じ質問ではありませんか。
https://teratail.com/questions/342625
このようなHTMLファイルがあるとすると上から順に調べていきHTMLのbodyに追加していく処理を行いたいが、どのようにHTMLファイルをどのように参照するのか教えていただきたいです。1行調べた内容をノードの末尾に追加していき表示する。
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset"utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <p>p1 こんにちは</p> 9 <p>p2</p> 10 <script type="text/javascript" src="line.js"></script> 11 </body> 12</html>
下記のjavascriptは途中経過。HTMLを参照するというのはdという関数の仮引数であるnodeにHTMLの参照したコードを入れたいのですがどのように入れるかで悩んでいます。
Javascript
1function d(node,l){ 2 for (var i = 0; i < node.childNodes.length; i++) { 3 var li = document.createElement('li'); 4 if (node.childNodes[i].nodeName) { 5 var c = document.createElement(' '); 6 c.appendChild(document.createTextNode(node.childNodes[i].nodeName)); 7 li.appendChild(code); 8 } 9 ・ 10 ・ 11 } 12}
下記は行いたい実装結果
p1 こんにちは p2 html ・ ・ ・
回答1件
0
ベストアンサー
querySelectorAllを使うといいと思います。
たとえば
JavaScript
1var matches = document.querySelectorAll("p");
はdocument内のすべての<p>要素のNodeListを入手します。
NodeListの各要素について処理を適用するコードの例はこちらにあります。
NodeList - Web API | MDN
投稿2021/06/13 02:17
総合スコア8402
pだけを調べたいわけじゃないです。うえから順にすべての要素を調べていきたいです。
ならquerySelectorAll("*");でいいんじゃないですか？
調べて応用する力をつけましょう。
すみません。
質問でそれをdocument.writeやdocument.body.appendChildなどで表示させるにはどうしたらいいのでしょうか?
回答に貼ったリンクを読んで勉強すればわかると思うのですが…
たとえばですよ
var nodes = document.querySelectorAll("*");
for (var node of nodes) {
document.write('**' + node.tagName + '** ');
document.write(node.textContent);
document.write('<br/>');
}
nodelistの階層を調べたり、必要にテキストの文章を書かれているNodeの横に書くにはどうしたらいいんでしょうか?
あなたの回答
tips
プレビュー
