In this video.
Let's talk about changing elements, proposals, which simply means that we can use JavaScript with
the help of the DOM to change any element.
Properties and properties can be any CSS properties that can be used on an element, for example, background
colour, font size and even we can go ahead and remove content from the page.
So let's see how we can use JavaScript with the help of the DOM to change any properties or we can add
properties to an element.
Well, this video is a continuation of the previous section.
That is how we can select an element that is the first step.
So after selecting, what do we do with it?
So after selecting, we need to use JavaScript to add content dynamically or remove content depending
how we want it.
So let's move step by step and let's start with how we can use JavaScript with the help of the DOM to
add or change element's properties.
Before we get into that, remember, all selected element has a property core style which represents
CSS.
So with this property or object we can now change in this case property of an element.
That's one thing we need to bear in mind.
So back to Visual Studio code.
As always, I have created a new folder with few lines of HTML.
Again, I'll provide this template for you, download it, extract it and open using your preferred
good editor.
So you can go ahead and open it using your life saver.
So let's go through the syntax for this particular HTML.
We only have h one and the underline and p tag and in there we have a tag inside it and another H one
which is called what is coding and P tag down here.
And we have lists of programming languages of which we use other tag to list them as tags.
And I have connected my JavaScript with it.
So the same thing.
I've connected my CSS as that.
Perfect.
So back to business.
Well, how can we use JavaScript to change this property?
You can see that for this particular website there is no stylin.
This is a default style and given to us by the browser.
So let's see how we can use JavaScript to add some CSS to this particular element.
So our target for this particular video is, number one, manipulating element style that is changing
properties of an element, or we can access to an element.
And after that we will talk about working with CSS methods that is classless.
Add, remove or toggle.
This is the method that you are going to use, so please pay attention about this.
The next target is manipulating element content.
Meaning how can we add content to the page?
Or how can we remove element content from the page?
And we can do that one using this method called in HTML and text content.
As you move on, we will differentiate between these two methods.
So let's move step by step.
Let's start with what?
Manipulating element style.
This is our first target.
So beautiful comment and the same thing down here as that.
So let's have some space here.
Perfect.
So what's going to be the first step?
The first step is let's talk about when we say manipulating element style, what does it mean?
Well, like I said, we can manipulate element style of an element using the style property.
So the style property is going to help us to add some style or remove style to our element.
And again, all selected elements have a style property.
So let's have a look at the steps of adding or removing content to a page.
So here is going to be our steps.
Like that.
So step number one is first is select the element we need to decide which particular element that we
want to select or style.
So let's move at a basic level.
So let's say that we have a class of this one, say title, and now we want to select this particular
H one and add some styling to it.
So for this one, we can use any single selector method, whether I get element by ID or query selector,
but because we use class, we are going to use query selector.
So here we go, going to be const title element.
The name can be anything is equal to document dot query selector and then because it's a class I will
use period and then the class name.
So if I console.log the title element, it will see that let's check the console.
And now we see that we have selected that particular element and as we say, that all selected element
has style property.
So if I make use of dot style.
Dot style.
Check it out in the console.
We are going to see some properties and you can see that this is CSS properties.
But for this one, they are common casing, right?
So this one represent the accent color of the elements.
If you scroll down the commonly used ones like background color, you see we have it here is empty and
we can also have the background image if you scroll down.
Border, border size, they are common casing.
I take note here.
You can see that we also have the color.
So we have all the CSS properties an element can have.
So with that one be in mind.
Now the next step is we want to hold our style to the element.
So step number two is set style.
To element.
So here we go on the elements selected.
We have this type of party dance style, and if I want to style, the color is going to be the color.
Dot color and because it's an object, we can override or update or remove it.
So for this one, we will say that style dot color is equal to the value red.
So when I say it, let's see now indeed I have the first element being red.
So I advise you to target the what is coding element, select it and then add any property you want.
If you're finished, then let's continue.
Well, I believe you are done with that.
So let's proceed.
Step number three is after selecting we can see that where I also want to move the color and it's pretty
simple.
Well so to remove it you copy this one, bring it down.
Let's say remove the style elements.
Remove style element.
It's as easy as changing this one to empty string.
So when I save it now you can see that everything is gone.
Now I have remove it.
The first step is I added my style.
And lastly I have remove it.
That is one cool thing.
Well, if you also want to get the computer style of the elements, how are we going to do so?
Step number three is get the computed style of the element.
Let me show you what I mean here.
So to get the computed style, we have a method called get computed style, which is this.
Then our pass in my element, which is my title element.
And on that I want the color.
So if I save it now, I can assign to a variable course called computed.
Style is equal to that.
So come here and then just console.log the computer style if I save it.
Now, let me check the console.
Now you see that?
Now I have the actual color that represents this particular each one, meaning getting the value of
the color.
So this method is important.
If you want to know the color code of your color or the type of color being used.
So if I change this one to green, let's see the computed color code here.
If I save it, you see that we have green color, our ggb color down here, which represents this one.
That's how we can get what the computed value.
So now you know how we can access to an element.
Well, so with this one being in mind, we can add any element properties apart from color.
We can also add, let's say add background.
Background color as simple as what?
Select the title element dot style.
Remember style comes first on that.
We have all the CSS properties but the common casing.
Background color like that and then is equal to let's make this one as red when I save it now.
Well, nothing seems to be happening.
So why is it so background.
I think it's G.
Yes.
Yeah.
Sorry, guys, it's G.
So now I can change the color on the background to whites.
For the meantime, let's remove this one because we are okay.
Let's comment this one and change this one to white.
I'll start now.
It's white.
I can also add padding around my h one.
So here we go.
Add padding.
So I would take this code.
Come down here.
It's going to be padding, padding of 20 pixels.
I think this is cool and indeed we have padding.
I can also add font size.
You can see how we are using JavaScript with the help of the DOM to add some content to the page.
So here let's see.
I want to change the font size is change this one to let's say 80 pixels.
Let's see now I have it as that.
So we can use any excess properties to manipulate this particular element using JavaScript.
So now I have introduced this one to you.
We can select any of these elements and add some color to it.
Let me show you how we can use multiple selector to select element and then we're going to add some
style to it.
You can see that these elements, they are identical, meaning they are all l tag so we can select all
the airtag ah to go and then we can add some CSS properties to it.
So let's say that these are our to dos and we want to know which of these to dos that we are done with
it for the meantime.
But for this one, let's say it's a programming language, so you can say that, well, we want to cancel
all the languages that I don't like.
Right?
So the first thing is I'm going to use query select all to select this one.
Okay?
The other so I can use by tag name or any method.
So let's see how we can select this element.
So let me save it this one.
Let me save it here.
So I think we can select this one by tag name, right?
Because we can select that.
So here we go.
So come down here is let's select the allies.
That is it.
So we're going to be const allies element is equal to document dot.
Get element by tag name.
You think by tag name.
Yes.
And I want the I.
Good.
So if I console.log.
The Allies.
The allies.
So let's see what I have here in my console.
You could see that we have a HTML collection and all my elements are in an array.
But behind the scene this is not rare.
Array and functions we saw how I demand also behave like an array.
But they are not.
Even though we can use some method like length on this to know how many elements are in this particular
array.
But not all array methods can be used on this particular array.
So all eight main collections if we want to work with an array, unless we convert from a HTML collection
to normal or proper array and we can do that using two methods and that one too.
We have talked about it before in the pivot section and that is six.
Well, so coming back here, if you try to check Dot's length on this particular array.
Indeed, we have this record.
Let me remove this console.log here, which is the computed value here.
Good.
All right.
So let's continue.
So check it out.
You see that we have six elements inside the array.
Well, but if I try to use, let's say, for each on this array that we assume that is an array.
But if we try to use some array methods like for each on this particular array, you could see that
something where is going to happen.
So check it out.
So let's save it now.
Let's see if we see that list.
Dot for is is not a function, which means that the elements that we have selected is not of type array.
So we cannot use for H on that.
So to do that unless we convert the HTML collection to proper array.
So before looping, let's say here that convict.
The HMO collection.
To proprietary.
All right, proper area.
Good.
And we can do this in two ways.
Remember how we introduce what is called spread operator so we can do that one as const.
Then I would say that convicted.
Element equal to my array.
Then I was spread all my A.T.M. collection, which is my list element.
So with this one, if I console.log the convicted elements here and let's see what we are going to get.
So let me console.log this one down here.
Well, let me comment the for each because for this one is no more.
Let me cut it here and then bring it down here.
And then for the meantime, let's comment this one out.
Now let's work on the convicted elements.
If I save it nine, please see that now this is proper array.
So for this one I can use any for each or any arithmetic on that.
This is the first step.
We can also convict ATM collection to proper array using array from so the same sentence cons convicted.
Element two is equal to.
Then I would take my every dot from.
Then I'll pass in the ATM collection, which is my last element.
So if I console.log this one instead of the first one here, I'm going to get the same result.
So for these methods, the one you think we are okay with it?
You can go buy it.
Okay, good.
So now that we know that we cannot convert, now let's come up here.
Let's uncomment this one.
Now, let's use this one or this one.
Any of these methods would be okay.
So now if I bring this one, now I can use mine for each on that.
So when I save it you can see that there is no error.
Now our JavaScript or application or the browser is happy with us.
So now inside the for each, I have access to the individual element here.
So if I can answer that, log the I.
All right, let's save it.
And I can see that we have the individual else's answer.
So if I open it, you will see that I have some content in it.
The first one is the C language and C++ and the Java.
So with this one being selected now remember we have the style property on that so we can add a color
to all those elements.
So let's see here, add style to or the like.
So here we go.
I would take a dot style and then dot color is equal to red.
Save it.
Now let's check what we have and indeed I have add style to all of this.
But the good thing about this format is that we can meet some conditions assuming that this is an object
with some properties like is done to true or is completed to true.
Then you check any element which is completed.
Assuming they say to dos, then we will check if element who has a completed properties.
Then we are going to underline it.
So I we can say that for this programming languages, I want to cancel all programming languages, which
is not JavaScript because JavaScript is my favorite.
Right?
So I'm going to cancel all of this programming languages with the exception of JavaScript so we can
make some conditions inside the statement.
So our break mind if statement, then I would take a line where I want to get the contents inside this
particular element.
We can get that using the inner HTML or test content and we have a specific video to talk about it.
For the meantime, bear with me and let's use the inner HTML, meaning the contents inside this particular
light.
It can be C, it can be JavaScript, it can be C++.
So if that one.
Is equal to JavaScript.
Let's see the syntax.
Yes.
Uppercase JavaScript going to be JavaScript.
Meaning if this one is true, then I will say the l.
I.
Dot style.
Dot text.
Decoration.
Text's decoration is equal to line.
That's through.
So for this, it's going to cancel this particular JavaScript.
But let's see.
Nothing seems to be appeared.
I think we made some spelling mistake here.
This is uppercase s, but here we made it lowercase.
So let's change this one to uppercase and can see that indeed I have canceled JavaScript, but I want
to cancel all with the exception of JavaScript.
So it's going to be if in HTML is not equal to JavaScript.
Now I want to cancel all of them.
You can see that now.
I have canceled all the programming languages with the exception of JavaScript.
That's one beauty about query selector or or multiple selector.
For that one, we can add a style to go.
All right, now that we know how we can select element and add some basic style in the next video,
let's continue with working with class list.