javascriptをつかって、要素を非表示にしたい。

Question

javascript初心者です。
以下のようなコードで、各ddを非表示にしたいです。
そこで、javascriptを使って、display:noneを各ddに適用しようと思ったのですが、
このコードだと、エラーが起きてしまい非表示にできません。
全てのddを非表示にしたいのですが、どうすればできるのでしょうか。

    <dl>
        <dt>よくある質問</dt>
        <dd>よくある質問の答え</dd>
    </dl>
    <dl>
        <dt>よくある質問2</dt>
        <dd>よくある質問の答え</dd>
    </dl>
    <dl>
        <dt>よくある質問3</dt>
        <dd>よくある質問の答え</dd>
    </dl>

<script>

document.getElementsByTagName("dd").style.display = "none";

</script>

    

Answer 1

.getElementsByTagName() は HTMLCollection を返します。

for (let a of document.getElementsByTagName('dd')) {
  a.style.display = "none";
}

https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName

NodeList を返す .querySelectorAll() のほうが少しだけ楽です。

document.querySelectorAll('dd').forEach(a => a.style.display = 'none');

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

Answer 2

エラーメッセージを提示すべきですが、原因は明らかなので回答します。

機能の名前をよく見てみましょう。
getElement"s"ByTagName

です。
あとは仕様確認です。

Document.getElementsByTagName()

指定されたタグ名を持つ要素の HTMLCollection を返します。

console.logで出力してみればわかりますが、要は配列です。
配列のなかに個々の要素が入っています。
styleというプロパティは各要素にもっていますので、取得結果をループして各要素に対して指定すると良いです。

Answer 3

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll("dd").forEach(x=>{
    x.style.display = "none";
  });
});