loading...
Cover image for JavaScript DOM - Part 7 - Query Selectors - Power to Grab anything [video + article]

JavaScript DOM - Part 7 - Query Selectors - Power to Grab anything [video + article]

developertharun profile image Tharun Shiv Updated on ・2 min read

The Complete JavaScript DOM (6 Part Series)

1) JavaScript DOM - Part 1 - What is it and what can we do with it? [video + article] 2) JavaScript DOM - Part 2 - The Document and Window Object [video + article] 3 ... 4 3) JavaScript DOM - Part 3 - Get Element By ID [video + article] 4) JavaScript DOM - Part 4 - innerHTML vs innerText vs textContent [video + article] 5) JavaScript DOM - Part 5 - Get Elements By ClassName [video + article] 6) JavaScript DOM - Part 7 - Query Selectors - Power to Grab anything [video + article]

This is going to be a multi-part Video + article tutorial series on JavaScript DOM. You're reading Part 7

You can read Part 6 here:

Considering Subscribing to my YouTube Channel if you like the video content: https://youtube.com/c/developerTharun

Recap

  • An ID used as a unique identifier for elements. No two elements on a page should have the same ID.
  • A Class is used as an identifier for any number of elements. So, a number of elements can have the same class.
  • document.getElementById('id') is used to get the element by Id.
  • document.getElementsByClassName('class') is used to get the elements by className and returns us a HTMLCollection which is like an array. We can get the length of this using .lengthand index it to get the individial elements.
  • document.getElementsByTagName('tagname') is used to get the elements by tag name and returns us a HTMLCollection which is like an array. We can get the length of this using .lengthand index it to get the individual elements.

Query Selector

Instead of using different methods to grab elements by referring to their Id, Class Name, Tag Name, You can use the Query Selector to grab any one of them. We will look at more of this in the examples below.

Example: Grabbing an element by ID

HTML

<p id="ts">The paragraph to be grabbed</p>

JavaScript

let para = document.querySelector('#ts'); // notice the '#'
console.log(para.innerText);

Output

The paragraph to be grabbed

Example: Grabbing an element by class name

HTML

<p class="sp">The paragraph to be grabbed</p>
<p class="sp">This wont be grabbed</p>

JavaScript

let para = document.querySelector('.sp'); // notice the '.'
console.log(para.innerText);

Output

The paragraph to be grabbed

Wait, the output is not incorrect, the QuerySelector returns us the first element that it matches. Ouch! There is a solution to this, and it is QuerySelectorAll which we will read in the next article.

Example: Grabbing an element by tag name

HTML

<p>The paragraph to be grabbed</p>
<p>This wont be grabbed</p>

JavaScript

let para = document.querySelector('p'); // mention the element
console.log(para.innerText);

Output

The paragraph to be grabbed

Here again, the output is not incorrect, the QuerySelector returns us the first element that it matches. Ouch! There is a solution to this, and it is QuerySelectorAll which we will read in the next article.

So this is Query Selector where you grab elements by ID using the # and the ID of the element, you grab the elements by Class Name using the . and the Class of the element, you grab the elements by Tag Name by using the tag name of the elements.

In the next article, we will look at the most popularly used QuerySelectorAll.

Considering Subscribing to my YouTube Channel if you like the video content: https://youtube.com/c/developerTharun 😊

Written by,

developertharun image

The Complete JavaScript DOM (6 Part Series)

1) JavaScript DOM - Part 1 - What is it and what can we do with it? [video + article] 2) JavaScript DOM - Part 2 - The Document and Window Object [video + article] 3 ... 4 3) JavaScript DOM - Part 3 - Get Element By ID [video + article] 4) JavaScript DOM - Part 4 - innerHTML vs innerText vs textContent [video + article] 5) JavaScript DOM - Part 5 - Get Elements By ClassName [video + article] 6) JavaScript DOM - Part 7 - Query Selectors - Power to Grab anything [video + article]

Posted on by:

developertharun profile

Tharun Shiv

@developertharun

Web Developer | DevOps Engineer | Programmer | Course Instructor

Discussion

markdown guide
 

Great article illustrating the usage of QuerySelector πŸ‘

 
 

Interesting, eager to see what QuerySelectorAll can do.

 

Thank you 😊 That's the next article

 

Good article, examples helped clarify my misconception.