querySelectorAll

Lesson 9 of 13 in Coddy's JavaScript DOM Methods course.

The function querySelectorAll() returns a collection of all elements that match a CSS-like selector, similar to querySelector but allowing you to grab all matching elements at once.

const elements = document.querySelectorAll(".other");

This above retrieves all the elements with class name other.

Challenge

Easy

You are given HTML code that contains two spans.

Using JavaScript only, change the styling of all elements, using querySelectorAll function:

backgroundColor to "pink"
border to "1px solid red"

Try it yourself

<!DOCTYPE html>
<html>
    <body>
        <span class="error">Error 1</span>
        <span class="error">Error 2</span>
        <script src="script.js"></script>
    </body>
</html>

All lessons in JavaScript DOM Methods

1Introduction

Introduction Document Object Model

2DOM Methods I

getElementById Modify Element Style getElementsByClassName Loop Through and Manipulate getElementsByTagName querySelector

3DOM Methods II

querySelectorAlladdEventListener innerHTML createElement and appendChild classList toggle