javascriptを使いタグにclassを与えるにはここからどうすればよいでしょうか？

Question

<header>
    <nav id="menu_bar">
      <ul id="menu_list">
        <li>Home</li>
        <li>Gallery</li>
        <li>Blog</li>
      </ul>
    </nav>
  </header>　　

与えたいCSS

.scroll_nav{
  background-color: #000;
  color: #fff;
}

このヘッダーにスクロールした際にクラスを与えcssの変化をつけようとしますが
jsにて「Uncaught TypeError: Cannot read property 'remove' of undefined」
というエラーを吐いてしまいます。

var menu = document.getElementsByTagName('header');
var topOfmenu = menu.offsetTop;

function fixnav(){
  if( window.scrollY > topOfmenu ){
    document.getElementsByTagName('header').classList.add('scroll_nav');
  } else {
    document.getElementsByTagName('header').classList.**remove**('scroll_nav');
  }
};
  window.addEventListener('scroll',fixnav);

エラーに関しては、removeのプロパティがなくてremoveが読み込めません
という解釈でよろしいでしょうか？

そしてclassを与えるにはここからどうすればよいでしょうか
よろしくお願いいたします

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

document.getElementsByTagName('header')は配列のような HTMLCollection を返します。
一つ目だけでよいならdocument.getElementsByTagName('header')[0]にしてください。

【Document.getElementsByTagName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName

Document インターフェイスの getElementsByTagName メソッドは、指定されたタグ名を持つ要素の HTMLCollection を返します。

Comments

[ShojiroAbe]

無事クラスが付与されました
クラス及びcssが適用されてとても感動しました
ありがとうございます
頂いたURLからまた勉強させていただきます