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

#javascript #webdev #beginners #codenewbie

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:

Article No Longer Available

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?

You can get to know the values or the content in the element [ coming up in the next article... ]
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.