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

JavaScript DOM - Part 3 - Get Element By ID [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 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')

Example:

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

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';

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';

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]

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
 

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

 

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

 

Sure.. planning to make one soonπŸ™‚

 

Hi, thanks for asking, sure, planning to make one very soon. πŸ™‚

 

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

 

Thank you, glad it helped. πŸ™‚

 

Yeah, your YouTube Channel was helpful to refresh few topics

Thank you, means a lot πŸ™‚

 

I Liked the project, simple and does its job πŸ”₯