getElementsByClassNameでの躓き

getElementsByClassNameへの理解不足で躓いたので記録として記載します。

Javascript学習の一環としてHTML/CSSで作成した静的サイトの文章を英語化しようとgetElementsByClassName, style.displayを使おうとしていましたが、getElementsByClassNameについてしっかり確認せず、名前の似ているgetElementByIdのように考えていたのでエラーとなりました。

getElementsByClassName（）：指定したクラス名を持つ要素のリストを返す。
getElementById: 指定したidを持つ要素を返す。

当初"リストを返す"を理解できておらず、その後のstyle.displayが効かなく困りましたが、配列として考えてfor分で取り出すことができるという情報を発見したので参考にしました。
pタグにクラスを持たせて取得し、取得した要素のstyle属性(display)を操作することで簡易的に日本語⇄英語の切り替えをできるようにしています。
無理やりやってる感じが強いのでスマートな方法があればアドバイスいただきたいです。。

//HTMLは割愛

document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("translate-ja").addEventListener("click",TranslateToJapanese);

    function TranslateToJapanese(){
        var ja_status = document.getElementsByClassName("language_ja");  //配列
        var en_status = document.getElementsByClassName("language_en");  //配列
        for(let i = 0; i < ja_status.length && i < en_status.length; i++){      //HTML要素を１つずつ処理
            var ja_display = ja_status[i].style.display;
            var en_display = en_status[i].style.display;
            if(ja_display == "none" && en_display == "block"){
                ja_status[i].style.display = "block";
                en_status[i].style.display = "none";
            }
    }}
})


document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("translate-en").addEventListener('click', TranslateToEnglish);

    function TranslateToEnglish(){
        var ja_status = document.getElementsByClassName("language_ja");  //配列
        var en_status = document.getElementsByClassName("language_en");  //配列
        for(let i = 0; i < ja_status.length && i < en_status.length; i++){      //HTML要素を１つずつ処理
            var ja_display = ja_status[i].style.display;
            var en_display = en_status[i].style.display;
            if(ja_display == "block" && en_display == "none"){
                ja_status[i].style.display = "none";
                en_status[i].style.display = "block";
            }
    }}
})