エラーが起きた状況

DOM操作を行うjsファイルをhtmlから読み込んだ時、addEventListenerの行に上記のエラー

エラーの意味

直訳で「nullのプロパティは読みこめない」と言う意味。
主に、タイプミスなどで間違ったidによってDOM操作を行った場合に起こるエラー。
しかし、以下に示すように要素の指定自体には問題はなかった。

event.html

//前後省略
<body>
    <button id="output-btn">文字列の出力</button>
    <script src="js/event.js"></script>

    <button id="add-btn">リストの追加</button>
    <ul id="parent-list"></ul>
</body>

event.js

//前後略
const addBtn = document.getElementById('add-btn');
addBtn.addEventListener('click', () => )

原因＆解決法

結論から言うと、htmlでscriptタグによりjsファイルを読み込む位置に問題があった。
JavaScriptを直接記入ではなく読み込む場合、scriptタグより下のHTML要素にJavaScriptは干渉できなくなってしまう。
そのため、scriptタグをbodyの一番下に記入するか、scriptタグにdefer属性を記述することで、この問題を解決できる。
以下改善後コード例

event.html

//前後省略
<body>
    <button id="output-btn">文字列の出力</button>
-    <script src="js/event.js"></script>

    <button id="add-btn">リストの追加</button>
    <ul id="parent-list"></ul>
+    <script src="js/event.js"></script>

</body>

event.html

//前後省略
<body>
    <button id="output-btn">文字列の出力</button>
-   <script src="js/event.js"></script>
+    <script type="text/javascript" src="event.js"></script>

    <button id="add-btn">リストの追加</button>
    <ul id="parent-list"></ul>
</body>

おわりに

かなり簡単な内容でしたが、プログラミングのアウトプットの一環としてエラー対処を記録してみました。
誰かのお役に立てれば幸いです。