JavaScriptでdetailsタグで現在openになっている項目を取得したい

Question

今detailsタグを利用し、表示している項目があります。
この複数のdetailsタグの中からボタンを押下した時にopenされているdetailsはどれか判断したのですが、
どのような方法があるかわかりません。

時間が無く、試せてなく、質問だけになってしまうのですが、わかる方教えてください。
よろしくお願いします。

<details>
  <summary>青い</summary>
  <dl>
    <dt>あおい</dt>
  </dl>
</details>
<details>
    <summary>白い</summary>
    <dl>
      <dt>しろい</dt>
    </dl>
</details>

また、openした時のみのイベントを取得する方法は可能でしょうか？

Comments

[yambejp]

ボタンとは？

Answer 1

MDNによれば、<details>は、

• 開いた状態かを管理するopen属性
• 開閉が変化したときに発生するtoggleイベント

を持つとのことです。

Answer 2

open 属性の有無で判定できるので、document.querySelectorAll('details[open]') などでいいんじゃないでしょうか。

Answer 3

こんな感じです

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    console.log(document.querySelectorAll('details[open]'));
  });
  document.addEventListener('toggle',({target})=>{
     if(target.open){
      console.log('open');
     }
  },true);
});
</script>
<details>
  <summary>青い</summary>
  <dl>
    <dt>あおい</dt>
  </dl>
</details>
<details>
    <summary>白い</summary>
    <dl>
      <dt>しろい</dt>
    </dl>
</details>
<input type="button" id="btn" value="btn">

Comments

[westbom]

document.addEventListener('toggle',({target})=>{
このイベントで開閉時のイベントを取得できましたが、
どのdetailsがopenしたかわかる方法はありますか？