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

Question

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

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

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

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

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

p1 p2
こんにちは

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

Comments

[m.ts10806]

＞itemはNodeです。

と書くより、実際のコードを。

[think49]

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

[Lhankor_Mhy]

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

Answer 1

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

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

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

Comments

[matobaa]

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

Answer 2

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

const lines = [Array.from(item.childNodes)
  .filter(node => node.nodeType === Node.TEXT_NODE)
  .map(node => node.textContent)
  .join(' ')];
lines.push(...Array.from(item.childNodes)
  .filter(node => node.nodeType !== Node.TEXT_NODE)
  .map(node => node.textContent));

Comments

[despaine198]

すみません。力不足でコードが理解できないです...

[despaine198]

この場合はやはり内側に入っている要素から文字列を取得していったほうが良いのでしょうか?

[matobaa]

えー回答したあとに質問を変えたのか、それはないわ。
的外れな回答になっているので無視してください。