HTML detailsの操作

Question

前提・実現したいこと

summaryのテキストの出力はできますが、中身の出力方法がわかりません
該当のコードで<font id="a">リスト1</font>などにすればできますが、idを振らずにリスト1と返ってくれば成功です
わかる方教えていただけませんでしょうか？

該当のソースコード

<details id="d">
    <summary id="l">list1</summary>
リスト1
</details>

<input type="button" value="list1中身確認" onclick="alert(l.innerText)">//list1が返る

<input type="button" value="list1中身確認" onclick="alert(d.innerText)">//list1が返る

<input type="button" value="list1中身確認" onclick="alert(d.l.innerText)">//不可能

Answer 1

d.lastChild.textContent.trim()で取れます。

このDOM構造の場合、最初のテキスト(中身なし),<summary>タグ,summary以降をノードとして子要素として持ちます。
childNodesから該当するものを探す必要はありますが、今回の場合「一番最後の項目」なので、d.lastChildで「リスト1」を含む要素にアクセスできます。

d.lastChild.textContentで要素のテキスト情報にアクセスできますが、
DOM操作の関係上前後のタグの中身全てをテキストとして捉えるため、
改行やスペースも含まれたものになります。trimで除去できます。

Answer 2

これはどうでしょうか。

<input type="button" value="list1中身確認" onclick="alert(d.childNodes[1])">

Comments

[vivia]

[object HTMLElement]と出ますね

[firegrape]

ごめんなさい。
きれいじゃないけど、これならいけました。
<input type="button" value="list1中身確認" onclick="alert(d.textContent.slice(-5))">