getElementsById() method restrict you to retrieve an element only by its
id attribute value, the
querySelector() method allows you to retrieve an element by any attribute present on the element.
The parameter you need to pass to the
querySelectorAll() method can be as simple or as complex as you need.
For example, here’s how to use the method to retrieve the first element that has the
class attribute of
querySelector() method always returns the first element that matches the query. The method searches the element on the page from top to bottom.
The string parameter passed to the
querySelector() method follows the CSS selector pattern, where
class is represented by a period
id is represented by a hash
Suppose you have the following HTML element on your page:
<body> <h1>Query Selector</h1> <h2>Learning Query selector method</h2> <p id="opening" class="bold">Placeholder</p> </body>
You can retrieve the
<p> element by passing
"p" as the method’s argument:
let element = document.querySelector("p"); console.log(element); // <p id="opening" class="bold">Opening</p>
Or you can also pass the
id or the class attribute, it will return the same
document.querySelector(".bold"); // <p id="opening" class="bold">Opening</p> document.querySelector("#opening"); // <p id="opening" class="bold">Opening</p>
You can also select an element by other attributes like
// return the first element with target="_blank" document.querySelector("[target=_blank]"); // return the first element with value="red" document.querySelector("[value=red]");
Even when you pass a selector that returns two elements, only the first element will be returned by the method. The following code tries to fetch both
document.querySelector("h1, h2"); // <h1>Query Selector</h1>
And that’s how the
querySelector() method works. When you need to retrieve more than a single element, you need to use the alternative
querySelectorAll() method instead.