JavaScript manipulation of the DOM Document Object Mode | Laurence Svekis | Skillshare

JavaScript manipulation of the DOM Document Object Mode

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (1h 36m)
    • 1. Promo DOM

      2:42
    • 2. Introduction to working with JavaScript and the DOM

      2:54
    • 3. What is the DOM

      6:46
    • 4. JavaScript DOM Document Object Model

      5:50
    • 5. JavaScript getElementById

      6:56
    • 6. JavaScript DOM select elements via Class and Tags

      6:34
    • 7. JavaScript the Document Object data

      5:22
    • 8. JavaScript Update Styling attributes using the DOM

      5:48
    • 9. JavaScript DOM onclick

      5:36
    • 10. JavaScript Mouse Event Listeners

      7:32
    • 11. JavaScript addEventListener

      7:28
    • 12. JavaScript Queryselectorall mulitple elements event listeners

      7:17
    • 13. JavaScript More Element Selection options

      6:03
    • 14. JavaScript Creating New Elements

      6:27
    • 15. DOM and Form Create Form Validation

      13:01

About This Class

JavaScript manipulation of the DOM Document Object Model
Access HTML elements using JavaScript make updates, set up event listeners and create new HTML elements.
JavaScript manipulation of the DOM - Start creating Dynamic and Interactive Content.

Learning how to interact with the DOM, will get you started quickly with more interaction on your webpages.

The Document Object Model is a model of your HTML document represent within JavaScript as objects.

Elements are within the HTML page rendered out by the browser. JavaScript engine in the browser then create representations of the elements as JavaScript Objects. Which in turn gives you the developer a whole lot to work with, the sky's the limit with what you can do at this point. You can communicate with these objects using JavaScript and then manipulate them. Any changes you make will be visible within the webpage itself.

Use JavaScript to select elements from your HTML code. All the web page elements are represented within the DOM. Document Object Model. Learning to better utilize the DOM will allow you to create more advanced user interactions, and update the content dynamically.

See how easy it is to select elements and make the interactive.

Select any element from within your HTML and bring it to life with JavaScript.

From an instructor with over 15 years of real world web development experience, learn how to use the DOM for your web projects.

Every element is an element object, which contains details about the object. The DOM is like a doorway to access all of this functionality that is already there. JavaScript gives you the ability to open up that door and make amazing things happen on your website.

Selecting Elements from your HTML
Update the element HTML on the fly.
Add event triggers.
Style your elements dynamically
Read and validate inputs
By the end of the course you will have the skills and know how to manipulate the DOM within you website.

I am here to help you learn how to create your own websites and ready to answer any questions you may have.

JavaScript is the most in demand skills, and learning how to use JavaScript will help to separate you from the crowd.

Want to know more, what are you waiting for take the first step. Join now to start learning how you too can create DYNAMIC and INTERACTIVE pages within your website today.

Transcripts

1. Promo DOM: JavaScript manipulation of the dawn. That's the document object. Start creating dynamic and interactive content to really bring your Web pages toe. Learning how to Interact with Dom will get you started quickly with MAWR Interaction with your Web page document Object Models is a model of your HTML document represented as JavaScript objects. Elements are within the HTML stage rendered out by the browser. JavaScript engine then creates representations of these elements as JavaScript objects, which in turn gives you and the developer a whole lot of information to work with. Literally, the sky's the limit. You can communicate with these objects using JavaScript on, then manipulate them and update them and change them natural. Any changes you make will be visible within the Web page. Use JavaScript to select elements from your age to cold. All the Web page elements are represented within the door. Learning to better utilise Saddam will allow you to create more advanced user interactions and update the content dynamic. See how easy it is to select elements and make them interactive. Select any element for more tenure html agent and bring it to life via Java script. This is from an instructor with over 15 years of real world Web development experience. Learn how to use the dawn for your Web projects. Every element is an element object, which contains details about that object. Dong is like a doorway to access all of this functionality that is already there within your Web coat. JavaScript gives you the ability to open up that door and make amazing things happen within your website. Learn how to select elements from your HTML update elements and HTML elements on the fly. At event triggers style. Your elements dynamically read and validate inputs and a whole lot. By the end of the course, you'll have the skills and know how to manipulate the dawn within your website. I'm here to help you learn to create your own websites and ready to answer any questions you may. JavaScript is the most in demand skill and learning how to use JavaScript will help you separate from the crowd. Want to know more? What are you waiting for? Take the first step, joined now and start learning how you to country dynamic and interactive web pages within your website today 2. Introduction to working with JavaScript and the DOM: My name is Lawrence, and I'm gonna be your instructor for this course. I've created this course in order to illustrate all the amazing things that could be done using JavaScript and interacting with the dawn. That's the document object model JavaScript. Manipulation of the dawn Start creating dynamic and interactive content to really bring your Web pages to life. Learning how to interact with the dawn will get you started quickly with mawr interaction within your Web pages Document Object model is a model of your HTML document represented as JavaScript objects. Elements are within the HTML page rendered out by the browser. JavaScript engine then creates representations of these elements as JavaScript objects, which in turn gives you and the developer a whole lot of information to work with. Literally, the sky's the limit. At this point, you can communicate with these objects using JavaScript and manipulate them and update them and change them in Iraq. Any changes you make will be visible within the Web page itself. Use JavaScript select elements from your HTML code. All the Web page elements are represented within the dog. Learning to better utilise Saddam will allow you to create more advanced user attractions and update the content dynamically. See how easy it is to select elements and make them interact. Select any element from within your HTML page and bring it to life via JavaScript. Thistles from an instructor with over 15 years of real world Web development experience. Learn how to use the dawn for your Web projects. Every element is an element object, which contains details about that object. Dawn is like a doorway to access all of this functionality that is already there within your Web court. JavaScript gives you the ability to open up that door and make amazing things happen within your website. Learn how to select elements from your HTML update elements and HTML elements on the fly. At event triggers style. Your elements dynamically read and validate inputs in a whole bottle. By the end of the course, you'll have the skills and know how to manipulate the dawn within your website. I'm here to help you learn to create their own websites and ready to answer any questions you may have. JavaScript is a most in demand skill, and learning how to use JavaScript will help you separate from the crowd. Want to know more. What are you waiting for? Take the first step. Joined now and start learning how you to create dynamic and interactive web pages within your website today? 3. What is the DOM: in this lesson. I want to do a quick introduction of the Dom how we can see the Dom, what it is and how we can begin to interact with the dawn. So what the dawn is? It's short for document object model, and this is an object model that's based on all of the HTML elements. It's over here on the left hand side. I've got my editor open, and I've just got a really basic Web page with several elements here. So I've got some HTML dibs. I've got some some text within here and so on. And so all of this information, when the browser sees and interprets, renders A with that HTML code, it actually creates document objects within JavaScript and these air accessible via JavaScript essentially, what the top level of the dawn is, this is going to be the windows off the window object, and we're gonna be showing you through the Lexx few lessons also some built in functionality that's already available within the window object. So, in order to actually access and see what's contained within the dom, we can output it within our javascript. Now, when it comes to javascript, we have several options of where we can place our script tags so we can place our script tags. So sometimes you might see script tags here at the top, and sometimes you might see script tags here at the bottom. And when it comes to the DOB, this actually matters were your place in the script tags is we want to make sure that this content is accessible before we try to access it. And what that just essentially means is because the browsers, actually, when it's rendering out that HTML code, it's also building out that Dom. And until all of the HTML code is rendered out, we actually don't have the full contents of the dawn. So we do have things bite like default. So we do have the window object so I can see that when I do console directory and if I list out window and if I do console directory again and a some journalistic document and what this is going to do is this is gonna give me an item within my console log that I can open up and I can click through, and I can actually see all of the different pieces of the dong. So we've got the window up here and way. See, we've got a lot of different functions that are available by default within this window. And then, of course, all of these air accessible via javascript. And as we work through the next set of lessons, I'm gonna show you this in a lot more detail. And as you can see, there really is a lot of information here. And there's a lot of stuff that's contained eso. We're gonna be working with alerts and we're gonna be working with prompts and these air built in functions. So we have to do is call to them with the window object, and then we get access and that runs the functionality that's contained within their. So this was just the windows object. And now we've got the document object and we see that we've got a lot of information contained in there. So this actually, because we've loaded it here in the top, we're not actually getting access to all of the body content, and I do have script tags in the bottom, So I'm gonna quickly show you what happens when I load the document in the bottom as well. So we're just gonna reload this page and see that now we're producing the window. The document and we're also producing a second document down here. And the difference here is that we also have the body because at this point, once we're putting the script down here, we did have an opportunity. Load the body contents within the document as well, and we can see some of that information that's contained within the body. So we've got the first child there, and so on. We've got all the different nodes, which again we're gonna be looking through in more detail. So this was in order to just demonstrate why we need to place the dom at either the bottom and let all of the body contents load, or we can initiate a function calls. We can add something called an event listener, which, of course, we're going to talk about in later lessons as well. And if we add in a new event, listener here. So maybe we'll just add it in here, It the top. So I'm gonna do window. And of course, we are going to get into more detail about of that. Listeners as we progress through the next set of lessons. Eso What we're doing is we're just going to simply listen for the window toe load, and once it loads, then we're going to run the function. And basically, what this is gonna dio is this is going to give us the ability to lord the body contents as well. So show you what happens now when I go out and if I refresh it and we'll see within here. So now we did have the ability to load the body and all of the body contents because we did add in this event listener and this actually gave a stability to see the contents of the body. So basically, what happened here? As the Browns air ran through the code, it hit the script tag. It added, In this event, listener, which essentially is a trigger that's waiting for something to happen and what it's doing is waiting for the window to load. And once the window finishes loading, then we know that we do have access to the document, us well, and once that event listener fires off, then we're able to run through the functionality. But through the most of the course. So this is just one way of accessing the dorm information when you place the code at the top of your Web page. And, of course, there are different scenarios when you are developing, so there are cases where you might want to place it at the top. And if you have a lot of HTML peed content such as images loading in, then you might want a place at the top. But more than likely and best practice is usually to place those script tags at the bottom , and especially when you're interacting with Dylan content that you do want at all to load into the page. So now that we've gone through all of that with the DOM, we're ready to start working with it. So the next few lessons will be showing you how to work with the Dom and create dynamic interactive content within your Web page, using JavaScript, accessing the Dom and manipulating the dumb. So all of that is coming up in the next set of lessons 4. JavaScript DOM Document Object Model: in the next set of lessons, we're gonna be looking through document object model. And this is also known as the Dawn. So we'll be looking at what the dawn is and how it works within JavaScript. So the Dom and HTML together allow us to access any one of the elements within our HTML page and using JavaScript, we're able to manipulate those elements, update them, create interaction and as well get content from any one of the elements within our HTML code. Essentially, what the Dom does is it makes it really, really easy to access HTML elements. So let's open up our editors and we'll take a look at the dawn. So what I've got here is really basic website, and I didn't need to create some HTML code for this settle lessons because we do need to have something to interact with. So I created a very basic Web page. It just rendered out here on the right hand side, and I'm also going to be using the Google chrome deaf tools so we can open that up on windows, weaken press control, shift I and open those up. It is also available for Max so As long as you're using chrome, you have access to Dev Tools. Put up our deaf tools. Maybe we'll make this bigger when we open up our deaf tools. We see that initially here under elements, we've got all of the source code that we're looking at within our web page. But we also have our sources here so we can get some more information about the source and what's included within the resources of the court going back into elements. So for this example here, I'm just gonna have to drag it out a little bit and we can see that we've got styles computed. So we've got our blocks model for CSS. We've got event listeners, so these are actually going to be dom objects. So what it's gonna be doing is actually listening. So if we have any event listeners set up in javascript will see them there. We also have these dom break points and we have properties and we open up properties such as we open up the HTML. We've got a whole bunch of information here, so we've got everything from html the underage to melt in her text. We've got the name space you are. I. We've got just a whole bunch of event listeners here and triggers. We've got our outer HTML and so on, so I've got a lot of information that we have access to. And essentially, this is what we look at when we access the dome, and what the Dom does is it allows us to get access to elements within the Web page, and the dom is actually loaded when the Web page lows and it's the browser that creates the dawn. It creates all of the Web elements as an object and breaks them apart in an easy to manage and access model, which is the dom. And essentially, it's like a tree construction. So it's a construction of multiple objects with higher he so starting at the top with the HTML. So starting with their first element and working all the way down. So these the head, the body are just beneath HTML, and we can work all that it way down and access any one of the objects within the dome that's available. Each one of these elements has its own set of properties, so when we open this up in depth tools, we can see whenever we're clicking on button one. We've got properties there, and it's got its own set of properties. So its own event handlers, it's got its own inter html in her text and just a whole bunch of information here that we have access to. And for further definition, about the Dom. There's one at Wikipedia here, and it also gives you a doc an illustration here of the way the Dom works. So we've got the window as the outer container. So this is also the one window object model. And this is where, when we're writing JavaScript alerts, this is where all of the was functions sit and history location. But then when it comes to the dawn, so this is actually the Web page and content within that Web page itself. So we've got some examples here of links, anchors, forms and a whole bunch of different elements. So let's open up our editor and what I want to do first is I want to just list out the dog in the consul's. We're going to use consul log, but we're gonna use console D I R. So this is going to give us a directory list e listing of everything that's contained within the document. So again, this is that document object and we go out and we refresh the page. Open up our console. We see that we've got a whole breakdown of all of the contents of the document. So including the body, and then we can go down from there and we could select any one of the elements we've got Children on. Then we've got all the way down. So all the ancestors and descendants that are available and we have access to them as we navigate through and select elements that we want apply JavaScript and interactions dio. So I will be showing you how to do that in the upcoming lessons. And I just simply want to introduce what the dawn is, how you can get access to dumb and what you can see within the dome itself when you're using deaf tools. So the next lesson we're going to start interacting with the Dom and creating some interactive javascript. So it's coming up in the next lesson. 5. JavaScript getElementById: Interacting With the Dawn is one of my favorite parts about JavaScript. It opens the door Teoh a whole lot of functionality via JavaScript, and the first thing that we need to do in order to start interacting with those elements is selecting elements, and then we can. Once we've selected the elements that we want to use, we have the ability to get that element content and manipulate the element. Information, attributes, styling and so on. And what JavaScript does is it gives us the ability to change that content in the HTML elements it allows us to change. CSS styling and HTML elements were also able to create interaction so able to set up events and have those events trigger the running of JavaScript code. We can also add and delete HTML oh elements. And we can really do a whole lot via the Dom and JavaScript. So let's get started and creating some interaction within our Web page. So open up your editor and within our editor. So we've got some really basic html here, and the first thing that we need to do is be able to select those elements. So we've got our body tags here. We've got some dips in here. So I should update this to be a body with the why with a lower case. Why? So it's consistent with the rest of the court. And first thing that we need to do is we need to select the element that we want to attract with. So we Ideally, we want to make these as actual buttons and actually make them clickable. So that's what we want to do within this lesson. And I should do a quick update here when we're using CSS. And if we want to access the class, all we have to do is do a period button. And we've also got numb numerous ways to access our elements via CSS. So if you are familiar with CSS, some of this is gonna make a lot of sense to you when we start accessing and selecting elements. So we've got different ways to select elements weaken selected via our RD weaken, selected via tag, and we can also traverse down so we can select out a parent and then selected the Children of the parent and move all the way down so we could look at the descendants and make selections that way as well. So much like we're selecting particular elements. So if I wanted to select this button in CSS, I do a hash tag than I would select button one. So I dislike the name, and then I'd enter in some properties. So if I want to set the background color or something like that, then we can really easily do that once we've actually made a selection of our element. And when I refresh it, we see we've got the changes taking place. So it's the same idea when we're selecting elements using JavaScript. So if we want to select that same element or if want to select a different one, all we have to do is identify it within the HTML code. And one of the easiest ways to identify it is to simply grab it and a sign of very variable value to it s so we're gonna do and we're going to grab it via the I D. So document. So we're selecting that document object and in JavaScript again, when we select objects we can select down particular in at attached particular methods to those objects and the one that we're going to be using is get element by I d. And then always to do in here is we have to set up that I d and identify it. And so what happens now is that if I console, log out the my my output variable and just save that and refresh it would open up our console so you can see all of the information that's contained within here. So we go to console and we actually see that it's just selecting that element information. So if we do instead of document log, if we do document directory, also give us a better idea of the contents of this particular element and all the dom interactions that we can have So we've got are the same thing that we had looked at earlier , where we've got all of these events that we can attach to it we can traverse through so we can see the next sibling. We can see the parent. We can see. The first child is a lot of information that we can get out here. So one that we're gonna look at first is we're gonna look at this inner text or inner html so we see that it contains that exact same content that's available inside of there. So now that we've assigned a variable to there, we can update that value by doing my output and in her HTML and we can apply a brand new value to it. So for now, we're gonna is gonna type new button and refresh this and we see that we immediately updated the content in here. So even when we go into our our HTML code, we see that the the content has now been updated. So all of this content gets updated via JavaScript. So the first run through it runs through. It sets the content in the HTML. When it comes to the JavaScript that says, OK, we're getting this element by I d. We're putting in the new variable. My output is going to contain all of this object information, and that gives us the ability to interact with that object and set that inner HTML. Now, this is the same thing we can do with inner text. And the difference between inter text and inter html is, of course, that inner text displays out all of your content as text and If we do inner HTML and refresh it, we can see that it actually runs through and renders it out as HTML. So we have that line break that PR tied with in there, and it's actually rendering it out as a new line. So in the next lesson, we're gonna look at how to make selections in other ways. So maybe we don't want to use ideas. We don't have to sign. I ds toe every single element. Maybe we wanna use classes, so I'm gonna show you how to do that in the upcoming lesson. 6. JavaScript DOM select elements via Class and Tags: So in the last lesson, we looked at how we can start selecting out elements from our HTML page. Now we're going to look at alternative ways of selecting out elements. So we know when we're using CSS weaken, select it by a class where you can select it by I d. We can select it by tag. So we also have the same capabilities when we comes to javascript and selecting at these elements. And this is why when you're creating HTML code, it is important. Teoh, consider how you're going to use ideas, how you're going to use classes and how you gonna identify elements that are going to need this interaction as well as needs styling. So in this lesson, we're gonna look at how we can get the my buttons and I'm gonna select document. And this time our method is gonna be different. We're gonna use get elements by name. And we noticed that this is plural, that elements. It's plural because it's assumed that have multiple elements, and it's actually gonna be get elements by class name because we're gonna be identifying them via the class name and the identifying class. Name is B t n and what I'm gonna do now is an A console log. All of that information out because the way that's going to be presented is gonna be slightly different. Because, remember, here we've got the possibility of having multiple items returned to thin this object, whereas we're identifying by I d. We know that we only have one I d per page of that particular value. So let's refresh our page will open up and inspect and see what's coming up here in the Consul. And this will give us a better idea of what we have available toe work with. So here we've got that html collection, and apparently we've got two items in that collection. So you got a zero and a one, and we also have a Bt and one and a BTM, too. So here it's identifying them via the I D. And here it's identifying them, just as it would Aziz ordered items within the object. So we've got our first item in our second item listed there. So we opened up these again. We have that whole list of information there. So the question really is how we do we differentiate them and how do we break those out? Eso weaken, Apply what we've learned before in JavaScript when it comes to accessing content such as content from an array and if want to access, maybe we don't want to access the 1st 1 but we want to access the 2nd 1 We can do something like this where we're only looking at that second item in the collection and we see here where we've got it identified there. And it's coming up the same way as the content from the get element by I d. Did because we're already aware that we've got two items there when we look at our HTML code, and typically you want to keep this dynamic so you don't want a hard code a number. But this is just for demonstration purposes, because I am aware that I do have to separate buttons here, a zero and a one, and this is how I'm accessing them. But typically you want to keep this dynamic enough so that if you do, you don't have to always count out all the different elements in order to be able to identify them. So another weight when it comes to CSS toe actually access a particular element is just using the tag name. So here, if we want to give access anyone of the dibs and maybe we want to set a background color to them. So if you want to do this type of background color would say that we see that now, all of those dibs get that information and we can in turn, do the same thing with JavaScript where we can access my tags. And this one is gonna be documents because we're always accessing that document object. And remember, up here is where we've got a listing of all that document information that we have access to and this is gives us a better idea to find to our selection where we're selecting on what we're selecting. So this one again, this is gonna be plural, and it's gonna be get elements by tag name, and the tag that we're gonna be selecting is gonna be a div, and I'm going to do the same thing here where we console log out and I'm gonna consul log it that entire object of tags. So refresh it. We see that we've got relatively that same thing that we had in the classes where we've got three items here within the collection, and then we can identify them separately and pick out whichever one we want to use. So for this case, I'm gonna access that exact same one that we did in the my buttons so that we have some consistency here on the output. So I'm gonna access item number with an index of one s. Oh, this is similar to a raise where it starts 012 Refresh it and we can see that now we're able to pull out that particular element and access it and update the content as needed via JavaScript. So every web page already has some default built in information. And we can see all of this when we come here within our document object. So we see that we've got the girls. We also have titles for the Web page. Eso Maybe this one isn't built in, but most Web pages will define a title so we can get access to their so we can see that we literally have access to any one of these pieces of information about the web page. And once we have access to it. Once we can identify it, then we can pick that out and manipulated. So we're showing you more of this and how to pick out all of this default information that's already available within the Web page that you can also utilize within your JavaScript. So we're gonna be showing you that in the upcoming lesson. 7. JavaScript the Document Object data: in the last lessons we've looked at how we construct elements within our Web page and additional to selecting it by i d Selecting up by class name selecting up by tag name. We can even isolate out thes elements with even mawr consistency. And just like we do with CSS where we've got multiple different types of selectors, we can also have query selector that we can use within our JavaScript as well. So I'm just gonna call this my SCL for selection. And again, we're accessing that document object. And this is where we've got all of this contained. So the one that we're gonna be using is gonna be query selector, all and what this is going to do? Is this going to return all of the nodes of the elements that are descended from the element which we're looking for? Eso, query, selector all And maybe the ones that we're going to select out are gonna be dibs with a cloths of BT end, and I know that we're able to select that via the class name up there. But this is just gonna be another way in case you've got multiple dibs that have the class B T end. So maybe of a span bt n and you don't want include that. So just show you how this all works out. So listing out the my C l and we should get to items returns. So just toe, be sure we're going to refresh it. Take a look at the console and we see that we've got two items listed within the returned nodes. So if we select that 2nd 1 we get that exact same information that we did in the previous lessons there. So we also had looked at how we can update the inner HTML. So let's say I want to change this output and I want to update output to be the same as the title of the Web page. And we noticed that within here within the document object, we do have a listing of title. So this is gonna be really easy to dio. And this is one of those amazing things with javascript that it's just so easy to interact . So first of all, I want to do document yet element by D. And I'm gonna select out that element with the idea of output I'm gonna update the inner HTML of it, and I'm gonna equal that to document. And here it's just gonna be really straightforward because this is already contained within the object. So I could just equal it to document title. So let's just see what happens here when I refresh the page and I am trying to space this out. So I'm able to see that full line of code there. That's when we refresh it. We see that we've got the same title up here, and we filled out the element with the I. D of output with that same content that we had available within the title. Now this is the same thing so we can select out any piece of content within the document. Eso We've also got the u R l So if I refresh it, we can see Are you Earl and so on. So we can literally just when I opened up the console, any piece of content contained within that console within that document we have access to So we've got base you are I we can use. We can access character set. So if you want to write out character set on that one turned out a little bit long, but as you can see, I You can just pick out any one of these values. So anything that you wanted to access here, you do have access to it. So if you want to get the domain, same thing, you just have to update the document object. And we've got the domain listed there. Besides actually just pulling out this content. And of course, any variables that we have in JavaScript we can output those. We can make manipulations with, um, via functions and so on within our JAVASCRIPT court. So we also have more built in functionality that's available within the DOM because we have the ability to set things like the source code. They also have the ability to update styling and a whole lot more. So the next lesson we're gonna be taking a look at our web page and we're gonna be updating some of the styling. So maybe I don't like this teal color for the button. I've set it in styling. Well, I can use javascript to overwrite that and the same thing with the image. Maybe I don't like this image and I want the image to change and within upcoming lessons are gonna also show you how to trigger events via the DOM and that will create that interaction where we click something and something changes. So all of this is coming up in the next set of lessons. 8. JavaScript Update Styling attributes using the DOM: So this lesson we're going to make some updates to our actual code, and we're gonna update the styling as well as maybe the image source here. So this one is identified as my image. So the first thing that we want to do is we want to select that particular item and we're not going to set it up as a variable where it's going to simply do a document, get element by i d. And then identify that element so that one is called my image and we can get that source information that's available for the image so we can actually access the attributes because attributes as well is an object that's contained within the my image. So just to illustrate this better, maybe what we need to do is console log, not information, and take a closer look at what's available for us toe access. So when I refresh this and I'm not using Lauren pixel here, so it's giving me some random images, so I actually have no control over the images that are being shown. There s oh just going back into the object here. So my image object element contains all of this information and because it's an image, we also have s R. C. So this is the source of that particular object. So in order to output that I could simply do it console log there, and we can take a look at source followed by itself. So this will simply list out that source file. And just like we did with the HTML, we actually have the ability to make an update on it instead of listing it out. If I wanted to set a new value, they're all they'd have to do is do the equal sign and set the value. So I'm gonna just set another Laura, um, pixel and pixel dot com. And this is another long one. Here s o were still 100 by 100 and go back to our web page, close that up and reloaded. So, essentially, what's gonna happen here? It's gonna load the image 400 by 200 then it's gonna hit the JavaScript, and the JavaScript is actually going to rewrite the source of that image. So I click it. And if I go to inspect and if we look at the source code of the image we see that now it's been rewritten. So it's actually Lauren picks a 100 by 100 instead of being that initial size of 400 by 200 . So besides all of this, we can adjust our styling. So I said before, when we look at this new button, maybe we don't like this teal color maybe, or Aqua Color and I want to adjust that. So in order to do that, I need to set and access that I d. Again. So I'm gonna simply copy, get out here and again, looking into what we have available to us so we can dio style. And this is essentially going to return back all that object information about style. So if I want to be really specific here will show you what shows up here within the consul here. So I'm gonna Consul, log out that button information there and CSS declaration. So we have access to all of this styling information and loading the stuff into console really gives you a good idea on an overview of what's available to you. So we have literally over 100 different possibilities here that we can apply styling to eso one of the most common ones. Maybe it's like a background color. So we've already have a background color for it s own. We go on our background color, we see that background color so we don't have anything set there. But we can always set that background color. So all we have to do is do style and then we do background color. So let's update this background color and we'll see what happens. So do style and background. So this one is background color and now we need to assign a color value. And I'm just gonna do a default maybe of red or something like that. So let's see what happens when we refresh it. We see that we change the background color and now when I go into here, I can see that I've got assigned background color of red. So this is assigned into the dawn and the Dom understands that now this background color is red and we've updated that via javascript and really literally, the possibilities are endless. Just like with CSS, you can access any one of these properties and make updates to it. Eso here, we've got our default here so CSS text, background, color red. So this would be overriding that current tax that's available within their and we see we've got a lot of options. So in the next lesson, we're gonna introduce some interactivity. So you've got these elements here. They look like buttons, but they don't do anything when you click them. So the next lesson we're gonna take care of that and we're going to start adding that interactive component that's available within the DOM. And it's going to give us the ability to make thes actually buttons instead of just elements that aren't are representing buttons. So it's coming up in the next lesson. 9. JavaScript DOM onclick: So this lesson we're gonna introduce some interaction. So maybe what we want to happen whenever we click these buttons, we want them to change color. So really, that's in the last lesson we looked at how we can update the styling of the element. So in this lesson, we're gonna look at how we can add some interaction. So the first thing I want to do is I want to identify button. So maybe I just going to give it an I d of variable button one. And this is gonna contain our button object. And we're going to just do document because again, using that document object, we're gonna get element by i d. And we're gonna select VTM one as our element. And now we can use this bt and object wherever we need it to. So if I want to do BTM and I want to apply, update the style and maybe I want to update that background color. So phone, turn it yellow. All I have to do is do style, background, color, yellow. I refresh it. We see that it up states to yellow. Now let's see that I want to add some interaction So I want to actually make this a button instead of just saying click me actually want to be able to produce a click and this is gonna be really easy Always to do is do BTM and we can do on click And what this does is this adds the on click event handler to that particular element that we've selected and maybe I want to run a function. So I've got my function that was calling my fun and then here gonna create that function so that my fund function and I could pass any arguments there. And maybe this is where I need to put that background. Color equals yellow. Let's go and refresh it. And so what's happening here is that supplying this background color So what's happening is it's already clicking it. Let's just add in something else here where would do a document? So maybe I'm gonna set an output variable here, so I'm gonna grab that put and get element I d put and set put dinner html and we'll set that to clicked. It's no when we refresh the code we see that already says clicked, so it does look like it's already running through that function even though that we haven't We haven't done anything with that function. And the reason is that whenever I am setting the function, the on click I don't need to actually do the curly brackets as I would because when I do that, then it fires off the function. So now let's reload the page. And now when I click it, it fires off the on click. And of course, there are different ways that we can do the on click. So I'm gonna do the on click on a button to And just to show you that there are just different ways to rate the scene type of functionality. So I'm gonna do BTM to select BTM to and for this one I'm gonna do be tiene too on click and this one I'm gonna equal it too. And here I've got a function since the completely blank brand you function, I'm gonna create and I'm gonna have my coding within here. So I'm gonna coffee some of the stuff that I've done here, and maybe all right clicked to, and we'll set the background two yellow and see what happens now. So I click it, we get clicked to click it, we get clicked and so on. This, at the root of things, is one of the quickest ways to get that dawn interaction. And I'm going to just open up the consul here so we can get a better idea of the properties that are available. So for button to when I go down, I can see that I've got a non click function here, and I've got something happening whenever it gets clicked, and we also have the ability to access any one of these triggers. So we've got the on click that we're using over here. But of course we can use any one of these weak and use, especially if we've got forms. There's quite a lot more options, but we've got this on dragons. Well, we've got mouse events, which we're also gonna look at in the upcoming lessons. So how, whenever we move the mouse over, we can fire off those events and so on. So you see, there's quite a lot of different options here. We haven't have the mouse wheels whenever on me on wheel. Whenever we move the mouse wheel, then we can trigger that interaction as well. It's a lot of options, and we're gonna be looking at more of these triggers in the upcoming lessons. 10. JavaScript Mouse Event Listeners: So in this lesson, we're going to dive deeper into all of these events that were able to trigger off. And maybe instead of the on click, we're gonna do something where whenever we hover over something, whenever the mouse is over, we change it toe one value, and then whenever we leave, we can change it to another value. So let's try that out and maybe we'll attach it to the my image. The first thing that we want to do is set up are variable because this is probably one of the best ways to interact with these document objects. Especially it saves us the trouble of having to keep calling into it, especially if it's static and it's not gonna be changing. But if you are working with forms and if you are changing things, then you may have to do another route in order to make updates and changes eso. If you've got a form and you're making some changes on your grabbing that information, you might have to do it within the function itself whenever the event gets triggered. So for this one, some why I am G and I minus access document and again we're going to just do a simple get element by i d. And the element that we're grabbing is the my image and then for the image itself. What I want to do is set that whenever we hover over that image. So I'm gonna put all of these declarations here at the top, and I'm gonna break this apart a little bit. So instead of a click further my I am, I am G we're gonna be looking for Maybe we can got some mouse events here, so got mouse down. Enter leave, move out and over eso Some of these might sound similar. Some mice mouse, enter mouse over so mouse over will continue to fire off while we're over top of it. But mouse enter fires off the one time. So just show you what the difference here is between the different mouse events. So we're going to do on my was. So do on mess over first. And how about we do my function to and then for the function to What I want to do is I want to set up. Maybe you could do a consul message and the other thing that might be interesting is maybe we can pull out and get some information about where the mouse is actually positioned. Eso weaken Do that as well when we pick up. So looking at our entire object here whenever we're loading it, we do have some information about the mouse itself can pick up that event information. So we're just gonna pass it as an E, and we're gonna output in the console as e as well and show you what happens here. So open up the console. And now, every time the mouse is over, we're triggering our event. But we see we've also got some event information here. So we've got our client ex client wise. We've got the position. We've got the type of event that happened. So it was a mouse over, so we can actually list these out as well. So if I wanted to list out what's happening, what triggered this event, we can see that I can list out that tight. And just like with anything else within the dawn, I have access to all of this information. So if I want to pick up my coordinates of the mouse got my X and Y coordinates I've got I've got my target so I can figure out where I am, what target I'm over on and just a whole lot more information. The event object is Actually it's different than using this because this gives us just the content of this particular item. So if I do something like console log this or maybe I could do a consul, directory this and refresh it. So we're actually, whenever we hover over, we get the this object, which is that initiating element contents of their. So you've got all of this information's have got access to it. Of course we can get the I. D. This way on. And we can also assign mawr events to it if we wanted to, and just really a whole lot more we can assign to it on. Then. Also, of course, we can update the styling. So if I wanted to do something like this, we know that this is that object that sent sent us to this function on the mouse over so I can do this style and I can complete maybe the background color or something like that, or that's actually not gonna work out. So maybe I can do a border. Let's do border and we're gonna equal it to one picks solid, blocked and refresh it. So now whenever we hover over it, Or maybe I should do something like Reds, it's more visible. And now, whenever we we hover over it, we get this border eso opposite of mouse over. We need to do another one, maybe for mouse out. So instead of on mouse over on mouse, I would and for this one, maybe just fund three. And for this function, maybe instead of red, we'll do block and updated to three. It's more evident what's happening there. So let's see what happens now whenever I go over, read out black and so on. Of course, we can also update the output so we can update the output of Maybe we want to put the mouse position X, and we'll equal that. So again, looking at our mouse event, we have client X information. We've got also X down there, so I'll have to do is e. X to get that coordinate, and I want to do the same thing here. So I've got he X. So now we see that the X values air changing as we're moving around. So wherever we're entering in, we're seeing we've got a mouse X value and then also an X value where we're leaving. So we have a better idea of where the mouse is coming in and we have a better idea of where at what? X coordinate. The mouse is leaving. So all of this information is available to us, and we can really build out on it via the Dom and JavaScript. 11. JavaScript addEventListener: in the previous lesson, we looked at how we can add the's event listeners and essentially have thes different events. Fire off whenever we had some interaction within our Web page. So much like a lot of things in JavaScript, we've actually got several different ways that we can add these event listeners. So I'm gonna keep these functions the same on We're just going to simply reuse, thumb and actually add event listeners to each one of these objects. And the way that we're going to do that is we're gonna identify the object. So just like what we did before we had the my I am G got my i m. G, and I'm gonna actually do an ad event listener. And what this does is this allows us Teoh register on event listener on a single target, and this target could typically be an element. And advantages of doing it this way is that we have the ability to add multiple event listeners as well as have a lot more functionality within the events and have more control over the event listeners so we can add them in. We can also remove these event listeners and again we can have multiple different types, event listeners. So we're gonna do identifying it as event listener and we're gonna register event listener off, Start off with click and notice that this isn't on. Click it. Simply click. And then, of course, we have that same ability, same capability of typing in our function There, we can pass over the event information as well, just as we did within the other events. And we can Consul law, goat, that event information. And of course, we can update something like output and do the inner HTML. So, actually, have something happens whenever this event gets fired, clicked. So now whenever we click the image, we're gonna fire off that event and we see that that's what gets fired off within our console. And of course, we see that we've got an output update here to the inner HTML. So you're probably looking at this and saying Okay, well, this does seem a little bit longer than what we were doing initially, where we're just doing that my image and we would add in that on click. And it's very true that this this does initially appear to be a longer way of doing the same type of functionality. But in fact, when we do adding event listeners, we have some definite advantages over the on click method. And one of the advantages is that on Click doesn't work across all browsers. You may have some problems with some older versions of Internet Explorer, and some other browsers may not necessarily translate on Click as an odd event listener. So the safest way to go when you're adding event listeners is to do it this way to add event listener. And of course, the other benefit of doing this is that when you add event listeners, you can add in actually multiple event listeners to that event. So if I want to fire off multiple functions and I'll give you an example of that, so instead of maybe a place this function on its own, pull that out and do more fun for I think that's the next available one and just tidy that up a little bit. So now I have the ability. So if I want to do on Click and I want to write my fund, I can do it that way I can fire it off. And as an event listener. I can also touch to my fund, but in addition to that, I don't have the ability to attach a second listener to it. But with this one actually do so just show you what the difference here is gonna be. So space those out. And first of all, we're going to run through those event listeners where we're not actually doing the adding of that listener. We're just adding the event within this type of functionality. And so, for our event were firing this one off clicked. And maybe we'll update that output to clicked two and changing that background style eso here we're doing border. Or maybe we can just keep keep that so to background border blue. So let's refresh this and see what actually happens. So we've got it on the image, and whenever we click it, we see that we get this red border and it seems to miss over the blue one as well. We get clicked s, we get the mouse coordinates and so on. So we don't actually get that 1st 1 We don't see anything firing off. It's probably better if I do a console here and I'm gonna just type in my fund and I need to court around that because otherwise gonna fire off that function that it's within. So maybe this is a better representation. So we just refresh that again, say that. Refresh it. And now, whenever we're over the object and we click it, we see that we're only firing off the my fun too. So and as opposed to when we commented out that first way of clicking, I need to open that up again, refresh it. And now when we click on it, we see that we're actually firing off both those functions. So that's the main difference is that it gives us the ability to fire off multiple event handlers and also added functionality and also ability to remove these event listeners. So an additional two advantages to the ad event listener is that semantics? So basically, we see that we're actually registering that event, whereas over here we're not seeing that registration of the event eso Sometimes there can be some confusion that these aren't actually events that are registered. Eso assigning the events via the ad event listener just makes a whole lot more sense and again of course there's that compatibility with older browsers. So when in doubt, use the event listener. And if you're trying to create a quick project or just wants a quick functionality to test state, then you can always go with the on click way. So in the next set of lessons, we're gonna be looking at even more detail how we can update and interact with the dog. So all of that is coming up in the next set of lessons. 12. JavaScript Queryselectorall mulitple elements event listeners: in the previous lesson, we had looked at just dealing with that one element and attaching event listeners to that and accessing those single elements by get element by I D. But we also need to look at the possibility that maybe we want toe access something via class or we want to access it. We want to access multiple different elements through different classes, through tags and so on. And that's where we can use query selector. So I'm gonna set up a brand new access and I'm gonna access all of those buttons. And then I'm gonna loop through the buttons and update maybe something on each and every single button. So in order to do that, the first thing I need to do is I need to select it my element. So I'm gonna call it Button E l for button element and documents, and I'm going to just use query selector and show you what happens when I use query selector as opposed to query selector. All so with query selector, we can select all the elements with the class of button and maybe we can Consul Law get that information or Consul directory out that information. So it's button l. And just to show you what's gonna be output here within the console. So when I refresh it, we see we Onley air selecting that first button and us a query selector does is it still isolates Onley that first available value that contains button. So it's gonna always access our 1st 1 and we can see that within of deaf consul here that were accessing click me. So what if I change this to Query selector all And as we know from before that we get a list of four different or anyone that meets that BTM value Now, we can actually take this even a few steps further where we can comma separate this out. So if we want to access all the BTM classes and maybe we even want to access all of the dips, so see what happens here and we get a node list of six we see also important to note that we're not overriding it. So we're getting the buttons. We're getting the dibs separately. So maybe we even want to do something like my image or something like that. So just going to go and refresh that we see Get a note, A list of five So we don't duplicate our lists. So this is definitely a good thing because we don't wanna have to have multiple elements and then have them several times within our list. So what we can do as well is we can actually loop through this list of elements that were turning as these button elements. And the way that we can do that is we can use length. So we have. So I'm gonna just Consul, log out and I'm gonna update this and we have a value here that contains the length. So you see, under Nord List, we have five. But we also have an object with the value here called length, and we can make use of that and use that within our looping. So now we see that we've got a length of five and we can do a quick for loop here, so we're gonna equal I 20 and we're gonna look at this as well in more detail. Upcoming eso For now, we're just going to simply loop out to that dynamic value of length, so whatever that length is, it doesn't matter because we're dynamically picking up them the length here s so it could be any variation. And this gives us the ability to dynamically loop through every single item that gets returned. And we need to increment I in order to have an incremental, incremental ing value so we can actually access and loop through all the different items. So Bt and e l and maybe what we want to do is we want to get that inner html. So maybe what we can do is we can Consul log that out so need to bracket out here s O that we actually have the next value and we can loop through them Consul log and let's see what happens here. So they're just going to reload this page. And now we see we get all of that inner html from each one of these elements as it loops through them. And I think I should remove it this image because I think that's just going to start confusing things. So you see, now we looked through all the different buttons that we have available to us. Just as we added that. Got that inner html as we looked through all the different items that are available to us. We can also do the same thing where we add event listeners to each and every single one as we're looping through. So maybe we can add click events to them and we can fire off a function. So maybe we can do the my fund function. It's every time either one of them is clicked. We'll just do that my fund function, and we're gonna pass through that event information, so see what happens now. So every time it clicks, we get these mouse events firing and we also get thes blue boxes around there so we can actually pick up and understand what information we've passed here. So even we've got the event information. But we can also get the I d if we want to. So now, as we click, we actually get the I. D of the element and so on. This is how you add events to multiple elements. And I had all these event listeners as you loop through them, and we can simply apply that styling, and we can pretty much do a whole bunch of different functionality here as needed. Whatever we're interacting with the dom and looping through Once we've selected our elements that we want to work with, So in the next lesson, we're going to dive deeper into picking out these different elements. Eso might not necessarily need tohave classes. And I ds as we can traverse through and check out all the child nodes in Maine and so on. So I'm gonna show you how to do that in the upcoming lesson. 13. JavaScript More Element Selection options: So this lesson I'm gonna show you how I can get access to all of these elements actually traversing through what's available within the dawn. In the previous lesson, we did Quick query selector all. So we also do have another option. So I'm gonna do variable and we need a container for that. So maybe we'll do button child notes and we're gonna do document and get element by i d. And this time we're gonna use the name of the parent, which is gonna be main. So this this one up here and we're gonna list of all the child nodes that we've got available to us, it's gonna make that a little bit bigger. So we're staying on one line. Eso what we can do now is Consul logging out or Consul directory out that Bt N. C. M. So whatever is contained within that object, let's just take a look at what actually gets output here. So see that we've got nine child nodes that are listed out here, So we've got text. The 1st 1 is we've just got some text within here on Ben. The next one is actually the button, and then the text in the button and so on. Let's take a look and loop through all the available child nodes and we're gonna get the names of those nodes. So the next thing we need to do is do what we did before where we're going to set up our typical loop here and we're gonna loop through while I is less than btm CN length because again we get that length value by default and then we need to increment I in orderto loop through all the available values. And for this one, we're just going to simply console log out and we're gonna pick out BT and CNN bracket. Keep that I within that bracket as we're looping through it and we're gonna list out those node names as they become available. And so, essentially, we're gonna list them all out within the consul here. So it's just save that go back yard here and refresh it. So now we see that we actually get the values here listed. So essentially, we've got nine notes within the list and they're all listed out here, and we're actually listing out the contents of each one of those nine notes that are available to us. Do we see actually should get rid of this one here because this is adding to some of the confusion. So I'm gonna just simply comment those out and refresh this eso again. Here's our list of nine nodes. The first ones text Dave, texted of text of text Div and lastly text as well. So now we can even take it one step further so we could do something like if the node name and check to see if it's equal toe div. And then if it is than what we can do is put something. So if it's equal to DIV than we're gonna output, look at some kind of bracket issue here. Eso just gotta make sure I'm closing off these brackets at the right points here. So, Consul logging out and I believe I believe I'm still missing one here. If I list out the node name and I could just as easily instead of the node name, I could just do something like i d. And that would list out all the I ds of every single element there within the loop. And of course, we can still go in through and add in event listeners if we wanted to. So if I wanted to As we're looping through here, I want to add an event listener of a click instead of this one I'm just gonna do is I'm gonna call on it this one so it doesn't actually fire off. And we can use the brand new event listeners that we've added Refresh it and of course, shouldn't copy and paste that cause that's gonna be different. Different value eso. Now we see that we do get that same functionality so everything is functioning as before. But we didn't actually have to identify every one of these buttons. We came in rate from the parent and we picked up all the Children and we saw the ones that were dibs with We could even did something with the class and so on. There's a lot of information that we can draw out there. So we added in a conditional statement, to check to see if the node names a div. If it is a div, then we add the event listener to that note, and then we get that same functionality as we did before. So again, a number of different ways in a number of different approaches that you can get that same effect, where you looked through all the different selected elements and make your selection of your elements within your Web page. So the next lesson we're gonna be looking at how to create elements into the dawn in using JavaScript also update them and append them and so much more. So it's all coming up in the next set of lessons. 14. JavaScript Creating New Elements: in this lesson, I'm gonna show you how to create a brand new element within your HTML. So here we've got some typical elements. We've got a bunch of buttons here, and maybe if we click one of these buttons we want start creating some brand new elements. So let's take a look at how we would go about doing that. So the first thing that we want to do is at an event listener Teoh the Element. So we need to identify that element. So document. And we're just gonna do get element by i d to keep things really simple and straightforward . So Bt and one. And we'll catch it to this first button. And what we're gonna do is at an event listener, and so that event listener we're gonna add in as a click. So once we click that first button, we're going to run maybe a function. So I'm gonna add in just about my fun and I'll create a brain. You function for their so it looks like again we're running out of space, and I like to try to keep it on one line there, so it's a lot more visible and easier to read. So here's our function. My fun. So whenever we click, we're going to send it over to this function, and then this is where we're gonna create those brand new elements. This is kind of like our element factory updating our HTML and adding in code. So the first thing that we want to do is set a brand new element. So maybe I'll do new l or something like that and document so there again, we're using that document object, and we're using the function to create element. And this allows us to create a brand new attributes note, and then it returns that value. So let's create an H one type. So next. The next thing that we want to do is we actually want to add in some content into that element eso maybe do something like, um, you content and again going into that document object we're gonna do create text node, and this it gives us the ability to add in some text. So Anu h one tag. So it's gonna be the text that's contained within that h one tag. So now we just need Teoh do a combination and figure out where we want to please sit within our web page. So we want to combine both of these newly created so the attribute and then the text snowed . So we want to add in this child this new content child into the new element. So the way that we do that is new E l and we use append child. And then now we do we select that new content object. So now we've got this newly created each one tag with content in it called text within it, saying you h one tag. So now we need to figure out where we want a position it. So I've already got this. I would put here I've got nothing in there, so maybe we can simply just add it under output. So output and we're going to do that same upend child. And this time we're gonna penned output with new E l and just see how this turns out. And maybe we should Consul log just to make sure that everything is firing off collect tree . So my fun and I quote around there and see how this turns out. So let's refresh and see what happens. So now whenever we're clicking and before we continue. I need to make a correction here because this should be create elements were not actually creating an attribute. We're creating an element. Eso just going to go back now into the code and refresh it. And now we see that we are able to create those each one tags above it. So now whenever we click, we're creating a brand new element with an H one tag. When we go into the source code and we take a look at what's available within the source code, we see that we've got a whole bunch of these h one tags, and as we click and open up that source, we see additional tags being created. How do you create brand new elements on the fly using the Dom via JavaScript? And of course, there's a whole lot more that you can continue to do, and you could work on using all of these this different functionality. Eso we've just done some combination here. We've got an event listener. We can also have any number of different combinations of these event listeners. These triggers triggered by user interaction and then having something dynamically happened via JavaScript. So all of this and a whole lot more is available via the dawn. And, of course, one of the starting points to working with the dawn is to maybe two listed out your console console D I R. And list out all of the available document information and then work through that make changes updates as needed, including adding elements, updating, styling and a whole lot more. So this is all available within the console. So take a look through and see what you can make happen using JavaScript and the DOM together. 15. DOM and Form Create Form Validation: in this lesson. I want to add form validation to this HTML form so typically might see a form and you see that it just got its policy can submit. And sometimes you might see on event Lister on a tribute event listener here, where you've got something hot, like on submit, and then it calls to a function. So we're not going to touch any of that each to melon. We're gonna do all of our functionality rate within JavaScript is the first thing that we need to do is make our selection and we've given the form and I d So weaken do document, get element by i d. Because, of course, this is the easiest way to make our selection via the I d. And we're gonna make a selection off the form, and we're also going to do the submit button as well, so that my form so that's the element that we're going to get. And then the listener that we're gonna replace on it is gonna be on submit, and then whatever that submit is fired off whenever that is triggered, we're going to run through this function. So here I'm gonna just build out that function. So maybe what we want to do. Eso we want to eliminate. First of all, we want to eliminate that default action. So whenever I clicked the send button, what's going to actually happen is that it's just going to simply submit before, So I want to eliminate that and we can eliminate this by doing a return false. So now when I go back out here and when I refresh so we see that nothing is happening and that's because it's we've brought this in, we've got the event listener on here on submit and when it fires off were just returning false. So essentially, what that means is nothing gets submitted. So next item that we want to look at is we want to look at the submit button and we want to add in some additional functionality there as well. And of course, we could do it in a number of ways. So maybe if we wanted Teoh and again, we're gonna use get element by i d. And we're going to select via the I d. So submit button and then this one, we're going to just do a simple on click. So whatever it gets clicked. We're gonna fire off maybe our validation so check form and create a function down here can actually check through the form. So we're gonna go down here and do function check form and then maybe just Consul, log out for now or I'm going to create another div here. And I was going to give it a nice idea of output so that we can actually put some content in here. And I'm gonna sign variable output so it put is gonna be my container for the document. Get element by i d. And this time we're selecting that output element. So whenever we check the form, whenever we click this button, we're gonna update, I would put. And we're going to update that inner HTML and equal it to clicked so that this way, we don't have to open up the console and just gonna make things a lot more visible. Easier to see. So we see that now, whenever we click it, we get clicked, and we're actually firing off both of these because by default, this button over here, we actually submit the form, and over here, where we're actually submitting the form. We've got a return of false. So we have two options here which we can do now. We can either go with this to validate and check the form. Or we could do this one to validate and check the four. And I got to go back to the form up here because what I want to do is I want to have the ability to do a condition here. I want toe check through a bunch of the values here within the form, picked them up and make a quick check on them and see if they're valid if they're going to meet my requirements. So I want to keep all of this within that same function. So I could realistically, I could just linked to this function as well toe check form. So I could do either one of those. And I could even just remove this click off the button. There's a few different options here, but for now, I'm just gonna leave it like this, and I'm gonna start set hooking up all of the different elements that I want to interact with. So the 1st 1 that I want to interact with is the name element. So I'm gonna sign a brand new variable access that element from the HTML And again this is gonna be get element by i d and the i d of the name is name so really straightforward there . And I'm going to just duplicate this s o for all the other two elements that I have there, and I'm gonna beautify it, so that aligns them all really nicely. So this one, the 2nd 1 maybe we can do my email and the 3rd 1 will be my MES for the message. And now we just need to set up those ideas. So msg there for the message and just mail for the email address. Now with HTML five. The really good thing about it is that if this isn't a valid email in here, it's actually not going to submit. So if I have something like this and just let me refresh that and I just realized that I have the, uh, type as text. So I had done that on purpose for the purposes of this demonstration, because when I have it as an email, and if I try to file out something that's not an email. Html five has this default pop up message. And of course, you can rely on that. Or you can take it one step further and build up your own validation. So I'm gonna go ahead and build up my own validation eso for the validation of the email. I've just got a quick function. I'm gonna copy and paste in here. And essentially, what this function is going to do is that it's gonna check. It's gonna take in this value of the email, and it's going to do a check. So it's going to check to see if it matches all of this criteria. So essentially, what this is saying is that it allows any type of content. We're looking for the at symbol and we're allowing numbers characters, and then we're looking for a dot and then some numbers and characters as well. So this accounts for various formats of email addresses and essentially as long as it's a valid email address and what we're returning over here is the results of the test. So if that my check is valid, then it's gonna come back true, and if it's not, that's going to come back false and we can work that into our logic here at the top when we do a quick check to see our submission process. So the 1st 1 that I want to check for is my name. And in order to get the value of my name, I just type in value. So I'm gonna do a quick check to see if it's equal to Blank because we don't want to have any blank submissions. And if it is equal to Blank, then I need to create another variable here. So this is just gonna be a blank variable, and I'm gonna use this as a container. Teoh, fill this up and then I'm gonna do my check on that to see if there's any value within this container sewing it. Just do our message and given value of name, not filled out. And I also want to do the same exact same thing for the other. Other values that I have within my form for some reason is having some difficulty. They're making the selection. Eso This was just beautifying it and I need to update Thies to match with what My selections are here up up here and instead of name. I'm gonna do email, not filled out and message not filled it and save that. And now I can go over here and one of the problems that I'm actually that I'm looking at right now is that I'm not doing a message equals message. So we need to concoct innate thes together. So this is in case we have multiple messages that we want output. And I'm also gonna add in some HTML so that we actually have these on new lines that gets output. And what we're gonna do now as well, is we're going to get rid of this one here, and we're going to update the inner HTML with the message. So let's just do a quick check and see what happens. So we see now when we fill out the name that that one disappears, we see that email and then the message, and then, uh, we should be able to set the form to submit if if we don't have anything within our message . So it's the next piece of logic that we can add in. And there's also one more thing here that we can add in. So one more validation So we're going to just separate this out, and I'm going to do a check to see if it's a valid email. So if it's a valid email than its, it's it's so we wanted to fire off if it's not being returned as true, and we want the message to take place. So this is kind of like one of those double negatives where I've got a No. And I'm looking for a false So there's a number of different ways to write this. But for now, we're just gonna do it, uh, within this type of format, so not valid email. So I'm gonna add that into the message string, and we'll just refresh that and we see that to something There has gone wrong, So just got to do a quick check and I can see that I forgot one of the brackets there. And so now we see that we've got are not valid email firing off one more quick piece to this puzzle on What we want to do is we actually want to do another condition here, and we're just gonna check to see if there's any contents in our message. I'm with the way that we could do that is we can check for the length of it. So if the length is greater than zero than what we're gonna do is we're gonna output this message here and also we're going to return False. But if we don't have any errors that we've thrown, so then weaken doing else here and we can return True. So let me just beautify it to make everything aligned, save it. And now what tested it? So we first tried to set it. We see we've got four things that we need to fill out here. So once I start filling out the name that one disappears, the email disappears, but we're still not valid. So if I do a valid email address, then we see that when we try to submit that. So I got to take another look at this and see, so I don't actually need tohave this part in here, so we'll try this one more time. So we put in a valid email address. So now all we need to do is fill out the message. So when we fill up the message, then we're ready to go and we complete the submission process, and I don't have anything that form PHP. That's why it's giving me that object not found. But this essentially is how you can really quickly use dawn and selection of your HTML elements in order to build out your validation, check on your your form within your HTML code.