Javascript DOM Selection Methods

Sept 17, 2020 by Rainey Piechowski

Learn all the ways yoou can use JavaScript to ge a handle on HTML elements in the DOM!

There are six ways you can select HTML elements with JavaScript

  • getElementById()
  • querySelector()
  • querySelectorAll()
  • getElementsByClassName()
  • getElementByName()
  • getElementsByTagName()

All of these methods are properties of the document object and so these elements need to be prefixed with 'document'.

getElementById

document.getElementById("toggle");
//returns the first element with an id attribute set to toggle

querySelector

querySelector accepts perameters that are CSS selectors.

document.querySelector("section > img");
//Returns the first img element that is a direct child of a section element

Both getElementById and querySelector return just one element. Any remaining elements are ignored. But now lets look at some ways of selecting multiple elements with JavaScript.

querySelectorAll

querySelectorAll behaves just like querySelector, except, querySelector All selects multiple elements.

document.querySelectorAll("div p");
//Returns an array consisting of all the p elements that are anywhere inside of a div element

getElementsByClassName

document.getElementsByClassName("menu-item");
//Returns an array of all the elements with their class attribute set to 'menu-item'

getElementsByName

document.getElementByName("group1");
//Returns an array of all the elements with a name attribute holding the value 'group1'

getElementsByTagName

document.getElementByTagName("h1");
//Returns an array of all the 'h1' elements