<detail>タグにjavascriptでopen属性を付与したい

Question

前提・実現したいこと

<detail class="list">にopen属性を与えて、<summary>以外のテキストの表示非表示を切り替えたいです。

javascriptはほぼ初めてなのでお手柔らかにお願いします。

発生している問題・エラーメッセージ

detail id="list"にして.getElementById("list")だと
<detail open>状態で表示されるのですが、
detail class="list"で.getElementsByClassName('list')だと
<detail open>になりません。

該当のソースコード

<details class="list">
  <summary>最初に表示させたい文字</summary>
  <p>クリックしたら表示させたい説明文</p>
</details>

試したこと

id（open付与ができた）

<details id="list">
  <summary>最初に表示させたい文字</summary>
  <p>クリックしたら表示させたい説明文</p>
</details>

document.getElementById("list").setAttribute("open","open"); 
//結果：<p>クリックしたら表示させたい説明文</p>が表示されている

class（open付与ができなかった）

<details class="list">
  <summary>最初に表示させたい文字</summary>
  <p>クリックしたら表示させたい説明文</p>
</details>

document.getElementsByClassName("list").setAttribute("open","open"); 
//結果：<summary>最初に表示させたい文字</summary>しか表示されない

希望すること

恐れ入りますが、急ぎで解決させたいので、「どうしてうまくいかないのか」の理論だけではなく
「どうやったら実現できるか」にフォーカスを当てたご回答をいただけると幸いです。

追記(2020.10.16)

複数のdetail.listで試すと、先頭のdetail.listのみopen状態になりました。
すべてのdetail.listをopenにする手立て等がありましたら、知恵をお貸ししていただけますでしょうか。
度々すみませんが、何卒お願いいたします。

<details class="list">
  <summary>その1</summary>
  <p>クリックしたら表示させたい説明文1</p>
</details>
<details class="list">
  <summary>その2</summary>
  <p>クリックしたら表示させたい説明文2</p>
</details>

document.querySelectorAll('.list').open=true;

Answer 1

document.querySelector('.list').open=true;

Comments

[k1010]

ありがとうございます。detail.listをopenにすることができました。

Answer 2

たまにある質問ですが、仕様を確認しましょう。

Document.getElementsByClassName()

指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。

配列風オブジェクトなので、ループなどで個別に要素を取り出し、操作する必要があります。
（リンク先のサンプルコードも参考にしてください。forで対応している例があります）