querySelector

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

The function querySelector() selects the first element that matches a powerful CSS-like selector, providing more flexibility than the previous methods for complex element selection. Example:

const button = document.querySelector("#btn");

This is how we access the button element with btn id.

Challenge

Easy

You are given HTML code that contains a button.

Using JavaScript only,

Retrieve the element using querySelector function.
Change backgroundColor to red using style property.
Change color to white using style property.

Try it yourself

<!DOCTYPE html>
<html>
    <body>
        <button id="myButton">Click Me</button>
        <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 getElementsByTagNamequerySelector

3DOM Methods II

querySelectorAll addEventListener innerHTML createElement and appendChild classList toggle