【JavaScript】階層関係から要素内のテキストを取得する方法

（-----)以下のHTMLから階層関係を用いて要素を取得してみました。
(1)
const target = document.getElementById('second');
const parent = target.parentNode;
console.log(parent);

と記述しました。
この場合返ってくるのは、
<ul id="parent">...</ul>
となります。これはなんとなくわかります。

(2)

const base = document.getElementById('parent');
const children = base.children;

console.log(children[0]);
console.log(children[1]);
console.log(children[2]);

次に上記のように記述しました。この場合も同じように添付画像のようなタグが返ってきます。
タグがそのまま返ってきます。

●１番目
●２番目
●３番目

のように返ってくるにはどのような記述をしたらよいですか？
よろしくお願いします。



----------------------------
(HTML)
<ul id="parent">
<li id="first">1番目</li>
<li id="second">2番目</li>
<li id="third">3番目</li>
</ul>

No.1 ベストアンサー 回答者： yambejp 回答日時： 2020/10/02 13:28

親から子のテキストをとりたいならこう

const p=document.querySelector('#parent');
const c=[...p.querySelectorAll('li')].map(x=>x.textContent);
console.log(c);

この回答へのお礼

textContentを使えば良いのですね。
どうもありがとうございました。

お礼日時：2020/10/02 13:45