DEV Community

Cover image for JavaScript DOM - Part 3 - Get Element By ID [video + article]
Tharun Shiv
Tharun Shiv

Posted on • Updated on

JavaScript DOM - Part 3 - Get Element By ID [video + article]

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

You can read Part 2 here:

In the video

We will be using a project Stick-It Notes to learn the DOM commands in this course. We will also be learning how to build this website step by step after a while in this series.

Project website: http://bit.ly/stick-it-notes
Project Code: https://github.com/tharunShiv/stick-it-notes

Difference between a class and an id

The same class can be used more than once for several elements, but a unique ID can be used only for one element. So when we are grabbing an element using ID, we will get only one element in return.

Syntax:

document.getElementById('id-of-the-element')
Enter fullscreen mode Exit fullscreen mode

Example:

<p id="ts">The para to pick</p>
Enter fullscreen mode Exit fullscreen mode
let paragraphElement = document.getElementById('ts')
Enter fullscreen mode Exit fullscreen mode

What's the point in grabbing the element?

  1. You can get to know the values or the content in the element [ coming up in the next article... ]

  2. You can style the element

Example:

let paragraphElement = document.getElementById('ts');
paragraphElement.style.color = 'yellow';
Enter fullscreen mode Exit fullscreen mode

You can change the color, the font size, background color, pretty much any CSS Style that you would apply normally. Note: we don't use hyphens here '-' as a separator between styles like background-color, font-size, font-family, etc., Instead, you've to remove the hyphen and capitalize the first word after it.

Example:

let paragraphElement = document.getElementById('ts');
paragraphElement.style.backgroundColor= 'red';
paragraphElement.style.fontSize= '0.9rem';
Enter fullscreen mode Exit fullscreen mode

You can access and do a lot more magic by grabbing the elements. We will explore and do stuff in this series. All you have to know now is that there is getElementById grabs only one element. And once you get that element, store it in a variable and use it for the purpose.

Next Part, where we discuss about what TextContent, innerText and innerHTML are and the differences between them.

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

Written by,

[deleted user] image

[Deleted User]

Top comments (10)

Collapse
 
venkat121998 profile image
venkat anirudh

Hi, it would be helpful if you make a Crash course on Deno.

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

Yes, please make a crash course or a series on Deno

Collapse
 
developertharun profile image
Tharun Shiv

Sure.. planning to make one soon🙂

Collapse
 
developertharun profile image
Tharun Shiv

Hi, thanks for asking, sure, planning to make one very soon. 🙂

Collapse
 
venkat121998 profile image
venkat anirudh

Thanks for sharing the code, helpful. Good YouTube Channel by the way.

Collapse
 
developertharun profile image
Tharun Shiv

Thank you, glad it helped. 🙂

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

Yeah, your YouTube Channel was helpful to refresh few topics

Thread Thread
 
developertharun profile image
Tharun Shiv

Thank you, means a lot 🙂

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

I Liked the project, simple and does its job 🔥

Collapse
 
developertharun profile image
Tharun Shiv

Thank you 🙂