The DOM: Selecting elements on the page

Where to load JavaScript if we are selecting elements on the page?
Always load it before the closing body tag (</body>). It is because, we need to have all elements before we start selecting them in JavaScript. We get null if we try to grab elements placing the <script> tag in the head because the elements are not yet created when the JavaScript is run.
Other option: (to use in <head> tag)
  • use defer and async
  • we can listen for the DOMContentLoaded event and then try to select elements from the page.
Best way: Load the JS before the </body> tag.
  • querySelector: Returns first match
    • const p = document.querySelector('p');
  • querySelectorAll: Returns all matches as a NodeList (like array but without array helper functions)
    • const p = document.querySelectorAll('p');
In querySelector and querySelectorAll, the argument we pass is nearly similar to CSS Selectors.
We can use things like:
  • .item (element with class of item) or div.item (div with class of item) etc.
  • Parent-child selector: e.g. to grab images inside div with class item
    • const img = document.querySelector('.item img');
<div class="items">
	<div class="item item1">
		<img src="" >
	<div class="item">
		<img src="" >
In above HTML, suppose if we want just the first item and find the image inside of the item.
We have 2 options:
  1. document.querySelector('item img');
    const item1 = document.querySelector('.item1');
    const item1Img = item1.querySelector(img); //important
    Note: We also have dated/old ways of selecting elements from DOM like getElementById, getElementsByClassName, getElementsByTagName etc.