要素ごとにテキストを取得したい

Nodeのテキストを要素ごとに取得を行いそれをconsoleに表示させたいと考えています。
例えば以下のようなHTMLのコードがあるとします。

HTML
1<p>p1<strong><br>こんにちは</strong>p2</p>

itemはNodeです。
getElementByIdを使わずにgetElementsByTagNameを使って要素のテキストの内容を取得する方法があれば教えてほしいです。現時点でのコードを示します。これでおそらくテキストは表示されるのではないかと思いますが、要素ごとに表示させるといった器用なことはできないです。

javascript
1var d = document.getElementsByTagName(item.tagName);
2for(var i = 0;i < d.length;i+=1)
3   console.log(d[i].textContent);

求めている実行結果を下に書きます

p1 p2
こんにちは

上の実行結果はp1とp2が<p></p>の中に入っているので1行目に表示。
「こんにちは」<strong></strong>に入っているため別で2行目に表示させる。

m.ts10806

2021/06/16 21:40

＞itemはNodeです。と書くより、実際のコードを。

think49

2021/06/16 22:15 編集

参考情報(過去質問) https://teratail.com/questions/342395 https://teratail.com/questions/342625 https://teratail.com/questions/343742 https://teratail.com/questions/343772

Lhankor_Mhy

2021/06/17 00:36

「itemはNodeです」とのことですが、Node には tagName というプロパティはないです。 nodeName の間違いではないですか？ https://developer.mozilla.org/ja/docs/Web/API/Node/nodeName

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

回答2件

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const txt=[];
4  document.querySelectorAll('body *').forEach(x=>{
5    txt.push([...x.childNodes].filter(x=>x.nodeType==3).map(x=>x.nodeValue));
6  });
7  console.log(txt);
8});
9</script>
10<p>p1<strong><br>こんにちは</strong>p2</p>

どのHTML要素のデータか明示するならこう

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const txt=[];
4  document.querySelectorAll('body *').forEach(x=>{
5    txt.push({node:x.nodeName,text:[...x.childNodes].filter(x=>x.nodeType==3).map(x=>x.nodeValue)});
6  });
7  console.log(txt);
8});
9</script>
10<p>p1<strong><br>こんにちは</strong>p2</p>

投稿2021/06/17 00:25

編集2021/06/17 00:34

yambejp

総合スコア116443

matobaa

2021/06/18 00:54

そうか `Array.from(x.childNodes)`は `[...x.childNodes]`でいいのか、なるほど!

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

やりたいことがよくわかっていないのですが、こういうことですか?
それとも再帰したいということでしょうか?

javascript
1const lines = [Array.from(item.childNodes)
2  .filter(node => node.nodeType === Node.TEXT_NODE)
3  .map(node => node.textContent)
4  .join(' ')];
5lines.push(...Array.from(item.childNodes)
6  .filter(node => node.nodeType !== Node.TEXT_NODE)
7  .map(node => node.textContent));