What are the javascript selectors?

Javascript uses the CSS syntax to select and manipulate HTML elements. Selectors are used to "find" (select) HTML elements based on their tag name, id, classes, types, attributes, values of attributes and much more. A list of all selectors can be found in our CSS Selector Reference.

What is querySelector()?

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

How many types of DOM selectors are there in javascript?

We have five types of DOM selectors in javascript. (i)getElementsByTagName()(ii)getElementsByClassName()(iii)getElementById()(iv)querySelector()(v)querySelectorAll()

Table of contents

Introduction:

getElementsByTagName:

getElementsByClassName:

getElementById:

querySelector():

querySelectorAll():

Frequently Asked Questions:

Key Takeaways:

Last Updated: Mar 27, 2024

JS DOM Selectors

Author Mandla Dharani

Introduction:

The main theme of this article is to style the elements in javascript. We have different methods to select elements in javascript. You can also apply style on HTML elements to change the visual presentation of HTML documents dynamically using JavaScript. In the following section, we'll discuss the various methods of selecting DOM’s in JavaScript.

DOM Selectors, as the name suggests are used to select HTML elements within a document using JavaScript. There are 5 ways in which you can select elements in a DOM using selectors.

getElementsByTagName()
getElementsByClassName()
getElementById()
querySelector()
Queryselectorall()

getElementsByTagName:

This returns all the elements that matches the specified TagName.

document.getElementsByTagName('h1') returns a collection of items matching the tag name h1. And since we got only one h1 element, the list contains only one elements.
Using [0] as index, we can access the first element in the list which is <h1 class="heading">DOM Selectors</h1>.
document.getElementsByTagName('li') returns a list of 5 elements as we have five li tags in our page.
And any individual element can be selected by using it’s index such as document.getElementsByTagName('li')[0].

getElementsByClassName:

This method returns all the specified elements that match the specified class name.

In the previous section, the selection is based on the tag name, but here the selection is based on the class name.

getElementById:

In this, the elements are selected based on the Ids. This may look similar to the tagname and Class name but this sector only returns the first matched element while ignoring the remaining.

querySelector():

This one returns the first element that matches the specified CSS selector in the document.

querySelectorAll():

This method returns all the elements that matches the specified CSS selector in the document.

document.querySelectorAll('.heading') returns a list of all elements that matches the specified CSS selector. Since we have only one element under the class name .heading, the list contains one element. And it can be accessed by it’s index.
Similarly, document.querySelectorAll('#item') returns a list of 3 items that matches the CSS selector. Individual elements are accessed by it’s index.

Must Read Fibonacci Series in JavaScript

Frequently Asked Questions:

What are the DOM selectors?
DOM Selectors, as the name suggests is used to select HTML elements within a document using JavaScript. There are 5 ways in which you can select elements in a DOM using selectors.
What are the javascript selectors?
Javascript uses the CSS syntax to select and manipulate HTML elements. Selectors are used to "find" (select) HTML elements based on their tag name, id, classes, types, attributes, values of attributes and much more. A list of all selectors can be found in our CSS Selector Reference.
What is querySelector()?
The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.
How many types of DOM selectors are there in javascript?
We have five types of DOM selectors in javascript.
(i)getElementsByTagName()
(ii)getElementsByClassName()
(iii)getElementById()
(iv)querySelector()
(v)querySelectorAll()

Key Takeaways:

In this blog, we have learned about the different types of DOM selectors in javascript. This followed by analyzing their features with different code snippets. The main theme of the blog is to understand the implementation of DOM selectors in javascript.