HTMLから.js外部ファイルのイベントリスナ(DOMContentLoaded)をセットする方法を教えてください。

前提・実現したいこと

プログラミング初心者です。
WEBページのサンプルコードを参考にしながらJavaScriptを使用したタブの切り替えを実装したいと思っています。

直接phpファイルにJavaScriptを記述した場合は正しく動作しますが、
外部ファイルとして読み込む時が上手くいきません。

外部ファイルでDOMContentLoadedのイベントリスナを実装するにはどのような書き方をすれば宜しいでしょうか。

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

外部ファイルに分けたイベントリスナ(DOMContentLoaded)が実装できない

該当のソースコード

[sample01.php]

php
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7  <title>Document</title>
8  <link rel="stylesheet" type="text/css" href="cssSample01.css">
9</head>
10<body>
11
12<?php
13//切り替えタブ
14echo '<p><h2>切り替えタブ</h2></p>';
15echo '<div class="box1">';
16
17echo 
18'<div class="panel>
19
20<ul class="tab-group">
21<li class="tab tab-A is-active">タブ1</li>
22<li class="tab tab-B">タブ２<li>
23<li class="tab tab-C">タブ3<li>
24</ul>
25</div>
26
27<div class="panel-group">
28<div class="panel tab-A is-show">コンテンツ1</div>
29<div class="panel tab-B">コンテンツ2</div>
30<div class="panel tab-C">コンテンツ3</div>
31</div>
32
33</div>';
34
35echo '</div>';
36?>
37<!--JavaScript読み込み-->
38<script src='changeTab.js'></script>
39
40</body>
41</html>

[changeTab.js]

JavasCript
1document.addEventListener('DOMContentLoaded', function(){
2    // タブに対してクリックイベントを適用
3    const tabs = document.getElementsByClassName('tab'); //ノードを取得
4    for(let i = 0; i < tabs.length; i++) { //繰返し構文で全てに適用
5        tabs[i].addEventListener('click', tabSwitch);
6    }
7
8    // タブをクリックすると実行する関数
9    function tabSwitch(){
10        // タブのclassの値を変更
11        document.getElementsByClassName('is-active')[0].classList.remove('is-active'); //is-activeの追加
12        this.classList.add('is-active'); //is-activeの削除
13        // コンテンツのclassの値を変更
14        document.getElementsByClassName('is-show')[0].classList.remove('is-show');
15        const arrayTabs = Array.prototype.slice.call(tabs); //引数にとったオブジェクトを配列に変換してくれます。
16        const index = arrayTabs.indexOf(this); //配列に対してだけ使い、DOMを引数にとって一致した要素番号を戻します。
17        document.getElementsByClassName('panel')[index].classList.add('is-show');
18    };
19});

[cssSample01.css]

css
1.tab{
2    flex-grow: 1;
3    padding:5px;
4    list-style:none;
5    border:solid 1px #CCC;
6    text-align:center;
7    cursor:pointer;
8}
9.panel-group{
10    height:100px;
11    border:solid 1px #CCC;
12    border-top:none;
13    background:#eee;
14}
15.panel{ /*非表示にさせます*/
16    display:none;
17}
18.tab.is-active{  /*tabを上書きして発火させます*/
19    background:#F00;
20    color:#FFF;
21    transition: all 0.2s ease-out;
22}
23.panel.is-show{ /*panelを上書きしてこれだけ表示させます*/
24    display:block;
25}