What is the difference between query selector and getelememtsbyid (or others).

Answer 1

there are two 'query selector' methods:

querySelector and querySelectorAll...

first return first element matching query string argument (css selector syntax) or null (if no match founded), last return array like list of all matching elements.

getElementById return first matching element with id argument (as id are intended to be unique) or null (if no match).

getElementsByClassName and getElementsByTagName return array like list of elements (could be empty -- 0 length): notice the 's' after 'element', wich is not present in the id variant.

'getElement...' methods are only available on document like object, while 'querySelector...' methods are available on any html elements: later will search on element children to wich it was applied.

but if you use id name with syntax compatible with js var, and didn't declare global var with same name, js prefilled var with element:

myId == document.getElementById('myId') == document.querySelector('#myId')

notice hashtag added in later argument to specify the id ;)