Can anyone give me a specific or clear explanation that , when to use QUERY selector and ID selector in JavaScript?

I wanted to fetch the checkboxes from the html part through Id Selector but not getting the desired output. After that I tried through querySelector , then I get my desired output. So this is the confusion that when to use querySelector and ID selector. Please clarify.

const checkBoxElement = document.getElementById('checked');
const checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');

these are the cases where I switch to querySelector from IdSelector.