This lesson is all about manipulation.
Sounds like fun, we've already had a sneak peek of this in the earlier lessons where we updated some
of the content on the inside of the element.
We're going to be doing more of that in this lesson, as well as updating element attributes, getting
attributes, setting attributes.
And we've already seen the style attributes.
So there's a little bit more that we're going to cover in this lesson in regards to the style attribute.
So element manipulation.
So we're able to set the inner HTML.
So this is commonly used in order to update.
If you want to update the HTML of an element, if you want to update the text or the content you could
use in her text or in her content, both are available as well as text content.
So that one is another way to update that inner content of the element.
So there's a lot of different ways to make updates and use the one that's appropriate for the situation.
You can also get the element object as a variable and then you can use that and shorten your code.
So we've got an example here where we're doing our selection of the element.
We're selecting the one with an idea of one, and then we're updating the TEMEL.
We're updating the style color.
So setting the fight to read saying style background, some background color to blue and then updating
the inner text to say tests are doing quite a bit of changes on that one.
So you can also get the element and you can set the element ID.
So one way that we were able to select the elements is via the ID so we can get that ID value from the
element.
And here's an example of how we're selecting all the list items were looping through all the list items
we're updating the text, the inner HTML, the inner text.
So we've got a bunch of stuff that we're updating.
We're also updating its ID dynamically with JavaScript.
So that's a really cool feature.
We're updating the inner text there.
We're setting an attributes, so updating its class and adding on a class of test for.
So there's a lot of stuff going on and we're going to be covering this.
So you had to do this.
So the different methods that we're using is to get an attribute.
This gives us the ability to get the elements attribute.
There's an example of how we're getting the element attribute.
So we're getting element by ID and then updating, getting its attribute and then outputting its attribute
value within the console.
And there's also another example.
So if you can get it, you can also usually set it.
So that's also the case here.
So using set attribute gives you the ability to set the attribute name to Hello Button.
And in our example, we're going to be setting the class to a value.
You can also set disabled to a value as well.
So there's a lot of things that you can do when you're setting attributes as well as you can return
back to attribute.
When you do get you can also update an element image and a neutral path.
So we've got an example here.
Since we can get the attribute and attribute for the element is that if we can update the RF with a
new value, we can also get the image source and update the image source with a new value.
So quite a lot that we can do when we're getting and setting attributes.
You can also remove an element from a page by using the remove method.
So selecting the element that you want to remove and then specifying remove will remove the element
from the page.
So there is a challenge to this lesson, of course, and the objective is to update all the list items
with IDs in sequence and also content with the particular count.
So we're going to take all the list items reset or add IDs that are going to be in sequence as well
as doing list item zero one, two, three, four, five, six.
We're also going to get the class and output it into the console.
So if the element has a class, we're going to update it into the ANADA, into the console.
So we're getting the attribute class and we're going to output them if it does have it.
So first and then we're also going to remove the first div with the class of.
So that's quite a bit to this challenge.
I'll give you a sneak peek at the code and there really isn't a lot of code in order to accomplish this.
So it's just a few lines of JavaScript.
And as you can see, there's quite a bit you can do with JavaScript.
Supports the video.
Try it out and I'll walk you through all of what we've covered in the earlier part of this lesson.
So I know we had quite a bit of stuff going on in this lesson.
So first of all, let's select the element as a value that we can use so we can just do it as a test
or we can call it temp elements and using document sort of processing it into a variable object called
temp and using query selector, we're going to select the element with the H1 tag.
So now we've got it within the temp object and we could update its inner text.
So let's get it to say hello.
So see, the update was.
On there, you can also update in our HTML, so this will give you the ability to add HTML so we can
do simple line.
So how about we change it to hi.
Hello.
So now we've got Temel in there.
I can see that HTML is added into that element to make this a little bit bigger.
There's also temp and we had text content so we can set the text content.
So in this case, let's set up to Hello World and there's also in our text as well.
So that's another option and we'll just call it Helu.
So there's a few different options to update that inner content.
And as you can see, the biggest differences with the HTML.
So if you want to include HTML, make sure you using the inner HTML and if you console directory out
that temp object.
And you can see that all of these values in our HTML is set, their inner text is set there, and just
like any other object in JavaScript, we can update these values.
And then also going down here, we have text content.
So any value that's here within the object we can select, we can update it and we can manipulate it.
So also going back into the console.
So we've got temp and we can return back.
It's Idy because again, this is an object, so there is no ID set to this particular element.
So let's go ahead and set it to temp one.
And now when we go into the elements, you can see that we've got an ID of temp one set now within the
document object so you can manipulate these element values.
We can also add in classes as well.
So let's create a first first of all, create a class and we'll change the text color to read user javascript
set attribute and setting the attribute class.
When we refresh, we see that we've got it added in a class to that particular elements.
We've got a class of red.
You can also read the class value if you want by using a get get attribute to that, you can get class
as well.
So temp get attribute and attribute that we want to return back is class.
So you can see that the class that's been set in there is so you can get and set attributes and there's
also remove as well that we covered.
So now we covered quite a bit.
And as you can see now, it's been that elements been removed.
So we don't have we still have temp sitting within the memory, but we've removed it from the HTML,
from the DOM object.
So that's an interesting effect.
With remove it removes it from the visible part.
We can still hold it within the memory and we can still access that and we can update it manipulated.
And then eventually we can also add it back into the page.
And I'll show you how to do that coming up as well.
This lesson is going to be continued, so I had to break it up.
So the second part coming up.