一つのリンクをPC用URLとスマホ用URLに切り分ける

Question

同一ページに複数設置しているhrefのリンクをJavaScriptで切り替えることをしたかったのですが、一番目のtextのhrefは切り替わってましたが、2つ目はhoge0のＵＲＬのまま表示されます。idでやっているから一つ目以外には適用できてないと思いクラスに変更したのですが、こちらに変更したら全てのhrefが切り替えられなくなりまし。
レクチャーいただければ幸いです。

        <p>text</p>
        <ul>
        <li><a class="js-changeLink" href="hoge0.html" target="_blank"></a></li>
        </ul>

        <p>text2</p>
        <ul>
        <li><a class="js-changeLink" href="hoge0" target="_blank"></a></li>
        </ul>

idで上手くいってる

document.addEventListener('DOMContentLoaded', () =>  {

  function uaLinkChanger($id,$url) {
    var link = document.getElementById($id);
    var ua = navigator.userAgent;
    if ((ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') == -1) ||
        ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0) {
        link.href = $url;
    }
  }

  uaLinkChanger('js-changeLink','hoge1.html');

})

classに変更するとうまくいかない

document.addEventListener('DOMContentLoaded', () =>  {

  function uaLinkChanger($class,$url) {
    var link = document.querySelectorAll($class);
    var ua = navigator.userAgent;
    if ((ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') == -1) ||
        ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0) {
        link.href = $url;
    }
  }

  uaLinkChanger('js-changeLink','https://line.me/R/ti/p/@662lfdvr');

})

Answer 1

querySelectorAllの戻り値はNodeList(要素が入ったリストのようなもの)なのでループで回してやる必要があります(もし要素が1つしか見つからなくても)

link.forEach(elm => elm.href = $url)