So what I'm going to do here is create two buttons, one for reading content and one for updating content. And once we click on those buttons, we want to run some code. So in order to do this, we need to introduce events and event listeners, which will be the next chapter. But let's see if we can get it working within here so we can click our buttons and run some code. So let's create a new div here. Let's give it two buttons, let's say read something and one for updating. So update something.

Let's give it two buttons, let's say readSomething and one for updateSomething. So updateSomething. And let's give these an ID, so let's say, readSomething and updateSomething for this one. Okay. Save that. That should be fine. Let's go ahead and select these buttons and add an event listener on them. So let's get rid of this. Let's make a new variable, say, readButton, document.querySelector.

So let's get rid of this. Let's make a new variable, say, readButton, document.querySelector. And this one is readSomething as an ID. So we'll put the number sign and readSomething. Okay. And same for the updateButton. But let's update the ID as well. updateSomething. Okay. Let's also create two functions here that we want to run once these buttons are clicked.

Okay. Let's also create two functions here that we want to run once these buttons are clicked. So let's say, readSomething as a function. Let's just console.log, readSomething. And same for updating. Okay, update. And update. Okay. So when I click this button, I want this function to be run. And when I click this one, I want this function to be run.

So when I click this button, I want this function to be run. And when I click this one, I want this function to be run. So we have to use events and event listeners for this. And it's pretty straightforward. So we have our read button. We say addEventListener. And when we click the button, we can say click run a certain function. So in this case, it's readSomething. So let's add that in here. And the same for our update button.

So let's add that in here. And the same for our update button. And this one is called update something. Okay, so that's pretty much it. If I save this, that does update. Let's try clicking this. That does work. And that does work as well. Okay, cool. Now, say we wanted to either read the text within our <h3> tag here or update the text.

Okay, cool. Now, say we wanted to either read the text within our <h3> tag here or update the text. So again, we have to select that element. So we can go here. Let's name it heading. We can say document.querySelector. And we have a few options here. I'll just select it by the ID and the ID is myHeading. Okay. So if we only wanted to read the contents of the text within the tags in the <h3>, then

Okay. So if we only wanted to read the contents of the text within the tags in the h3, then we can make use of the textContent property. So how about we console.log(heading.textContent)? Okay. But if you wanted to update it, you can do that as well. So how about we update it so we can reassign a new value to it. So we can say heading.textContent = 'reassign a new value'; And we can say 'updated text'.

Let's try reading something. And you can see we get this object here. And within here, we should see color red somewhere. So again, this is a pretty big object with most if not all of the CSS properties. Let's look for color here. And you can see it's set to red right here. And since this is an object, we can just say dot color directly. And that should just return red. So read something. Red.

It does. Or if you want, you can update the property directly. So we can say color equals blue. And both should work fine. Let's change this to orange. Let's try that again. And it does work. How about reading the classes on an element? You can see we have this class of heading for our h3. So again, let's console.log(heading.

You can see we have this class of heading for our h3. So again, let's console.log heading. And we can use classes, I believe. So classes are class name singular. Let's try that out. Let's read something. And you can see we do get the value of class here. So heading. So if I have something else in here, something else, that should return as well. But we can also use a property named classList, which is a bit more versatile.

So if I have something else in here, something else, that should return as well. But we can also use a property named classList, which is a bit more versatile. So let's console.log classList instead. classList. And let's see what we get. So again, we get this array-like structure, which has the classes as the values. So as you can see, we have heading as the first value and something else as the second value. And there are certain methods associated with this classList that allow you to easily add, remove or toggle classes.

And there are certain methods associated with this class classList that allow you to easily add, remove or toggle classes. So let's take a look at that. So it's classList.add to add a class. And I believe I have another class here, which makes the font size a bit bigger. So it's called heading-large. So let's make use of that. And let's say heading-large here. So we're going to add that class. OK.

So we're going to add that class. OK. And how about we go into the elements tab so we can see it being added when we click the button. So let me save this. Let's go into the elements tab. And we're a bit cramped for space here, but you can see the H3 tag here. So if I hit update something, we should see heading large be added here. And you can see it added here. You can also remove classes.

And you can see it added here. You can also remove classes. For example, if you wanted to remove the heading class, we can do that pretty easily with dot remove. So we want to remove the heading class. Obviously, that should remove it. So again, check out the H3 here. heading-large should be added and heading should be removed. And it is. Cool.

And it is. Cool. We also have the toggleClass. So if it's not there, it will add it. But if it is there, it will remove it. So let me comment out these two. Let's use toggle instead, or toggleClass. Actually, it is named toggle. So heading.classList.toggle. And we want to toggle the headingLarge class.

So heading class list toggle. And we want to toggle the heading-large class. So heading-large. Okay. So now, you'll see that every time we hit update something, it either adds it or removes it. Cool. So if we toggled another class that controlled the visibility, so I have another class here named hidden, I believe. And all it does is display: none;.

named hidden, I believe. And all it does is display none. So if we toggle that, it will toggle the visibility of that element. So you often see this in components like hamburger menus and modals. So let's toggle the hidden class. And now that should toggle the visibility of this element. So now it's visible. Now it's not visible. Again, it's still in the DOM, but it has that class on it. And now it's visible again.

Again, it's still in the DOM, but it has that class on it. And now it's visible again. How about updating our attributes? So if we go back to our h3 tag here, these are all attributes to this h3 tag. And you can have custom attributes as well. But let's just stick to what we have here. So say for example, we wanted to grab the id. So we can make use of getAttribute for that. So it's console.log, heading.getAttribute. And the attribute we're getting is the ID in this case.

So it's console.log, heading.getAttribute. And the attribute we're getting is the ID in this case. And this should return my heading. Let's save that. Let's go back to the console. Let's read something. And we do get my heading here. And we can update that attribute as well. But in this case, instead of assigning a value, we make use of the setAttribute method. So down here, we can say, heading.setAttribute.

But in this case, instead of assigning a value, we make use of the setAttribute method. So down here, we can say, heading.setAttribute('id', 'my new heading'). And that should update the id. Save that. Let's go back to our elements tab so we can see the id update. Right now it's 'my heading'. If we hit update. And that didn't update because the first argument is the name of the attribute. So in this case, it's id.

And that didn't update because the first argument is the name of the attribute. So in this case, it's ID. So we have to add that as the first argument. Let's try that one more time. My heading is the ID. If we update it, we get my new heading. So so far, we've just been working on this h3 element. But there's also a bunch of properties you can work with, with form elements. So let me just add a few form elements within here. So underneath our buttons here, let's add a form.

So let me just add a few form elements within here. So underneath our buttons here, let's add a form. And we're not going to work with the form for now, we're just going to add some form elements. I'm just going to paste them in here. Actually, let me get rid of this div here. So we have a standard text input and a select input. So if I save that, here's the text input. And here's the select with a few countries in them. And we do have IDs on them.

And here's the select with a few countries in them. And we do have IDs on them. So let's go ahead and select them. So let's make two new ones here. Let's say textInput, and the ID is textInput. And the ID for this one is countries. And it's renamed this variable as well. Okay. So again, if we're just reading the values of these form elements, then we can make use of the dot value property.

So again, if we're just reading the values of these form elements, then we can make use of element.value property. So for example, if I had some text in here, we want to be able to read this, say for example, if we were to submit this form to some sort of endpoint, we want the value of this text box here. And same for the currently selected element within this dropdown. So again, we can make use of element.value for that, for both the text input and the select. So let's just console.log textInput.value, and same for the select. So it's countries.value. So now if I save this, let's put something in here.

So it's countries.value. So now if I save this, let's put something in here. Let's select Mexico, and if I go back to my console and hit read something, it should read these values within the form. And it does. Cool. And just like we've been doing with the other properties, we can update them as well. So within here, for update, we can say textInput.value equals hardCodedFromJavaScript. And for the countries, we can say countries.value, and let's set it to USA. Okay, so if I save this, and if I hit update, we should see those values within the text.

And for the countries, we can say countries.value, and let's set it to USA. Okay, so if I save this, and if I hit update, we should see those values within the text box and the dropdown. And we do. Cool. So yeah, those are just a few examples of working with properties and methods that allow us to manipulate elements in the DOM. Again, there is a huge list of them. And usually you just learn about them as you need them in the projects you're working on. But if you actually want a list of all of the properties and methods on these elements,

In the next video, we'll take a look at more properties and methods that allow us to traverse the DOM.