When I have three files

test1.html

<script src="main.js" defer></script>
...
<div class="divOne"></div>

test2.html

<script src="main.js" defer></script>
...
<div class="divTwo"></div>

main.js

document.querySelectorAll('.divOne');
document.querySelectorAll('.divTwo');

Then I would get an error in the test1.html file that divTwo cannot be found. In test2.html I would get the error that divOne cannot be found.

How can I make JavaScript code optimal that I can include my JavaScript file for reusable components on any page, but if something doesn't exist because I don't use it in the file, nothing should happen?