JavaScript and the DOM

Selecting Elements

View Page Source for examples of selecting elements using JavaScript.

While getElementById and querySelector return a single element that can be accessed directly, getElementsByTagName, getElementsByClassName and querySelectorAll return a collection of elements.

A collection is like an array. You can access an element directly using its index or loop over the whole collection to access all of them.

querySelectorAll can select element using CSS pseudo classes such as :nth-child

Things that are purple:

• grapes
• oranges
• amethyst
• lavender
• fire trucks
• snow
• plums