DOM (Document Object Model) complete course with project..

hello everyone my name is khanam and in this tutorial we are going to learn completely about dom which stands for document object model okay if we are creating website using html and css okay html will add structure to our website and using css we can add styles to our website but if you want to make your website interactive which means that adding data deleting data modifying data then we have to use javascript inside our website so that we can make our website interactive okay when we use javascript in our website then dom plays and very important role that is a document object model using this concept we can add modify delete data from our website okay if you are having website suppose i'll just show you an example okay i have just created one simple to-do list and this is only using html and css okay now if i want to add some data here now when i click on this add button i can't add okay using only html and css we can only give the structure and we can only give the styles to our website we can't make it interactive if i click on this it is not going to add this apple here in my list item i can't add the data i can't delete any data from here okay using html and css we can do only so much but once we add javascript to this and once we use the concepts of dom in this then we can add data delete data modify data add style whatever stuff we want we can do using dom okay now i'll just come to this project code if i just uncomment this script tag that is my javascript now if i refresh this one you can see now i got all these buttons here i added this styles in my javascript and when i click on this you can see it's getting cancelled okay all the styles from this is been applied to this and also i can remove the items from here now if i want to add if i add apple now if i want to add the item you can see my apple has been added here now if i want to delete i can delete the item okay using javascript you can see i can add data i can add data i can delete data i can modify whatever i want i can do using javascript okay so dom plays a very important role when it comes to creating interactive website when we want to add and delete data modify data then all these concepts will be very much useful okay now uh we'll be seeing lot of examples in this project but as of now i just showed you the example of how our javascript works in our web pages and in our websites as well okay now what is dom okay when our web page is loaded the browser creates a dom for the page now suppose this entire whatever you can see this entire thing is my window and this whatever it's visible this hundred percent view height whatever it's visible to me where our content will be displayed that is our dom that is our document object model okay that is basically its document and this entire thing is my window wherever your content is visible that is called as document and document is created once our web page is loaded a document will be created okay this is the example of dom okay first i'll be having window which is entire screen of my laptop and second whatever content wherever my content is visible that is my document and document is nothing but it is a special object of a window and it is basically our html document complete html code is called as document okay and dom is nothing but a special object of window we'll be seeing an example on this okay now my html will be having head and body you can see here in my code my html it my html is having this complete head and body okay you can see here html is having only head and body inside head i'll be having titles i'll be having i'll be having meta tags i'll be having links okay inside body i will be having all this h1 heading tags paragraph containers diff containers span tag whatever tags i want i can just define inside my body and my head will be having title and meta tag and also links and my html will have this head and this body and my html is the parent of this head and body and my document is nothing but my entire html and my window is this entire thing okay we'll see an example in console then we'll understand what is this okay dom is nothing but it is a special object of our window first we'll understand examples on document object model then we'll learn further about it okay now you can see here i have one folder okay i have created my folder called i have created my folder dom session and inside this i have index.html and script.js now inside my index.html you can see here i have changed my title to dom manipulation i have one h1 tag for this i have given the id as heading i have my paragraph and here i have this input tag and my button here but an element i'll just copy this path i'll reduce this simultaneously we'll be seeing our output now i'll be pasting my path here i'll just close this shopping list now inside this you can see here i have my h1 that is dom session inside this i have one paragraph i have one input tag and my button here okay everything is displayed here now just right click on this inspect or you just press f12 and our developer tool will be opened now here i have this console and elements okay before we were working only in elements when we were using only simple html css and javascript now we'll completely work on console okay inside elements you can see all our content whatever we have written here html it will be visible here you can see all the content will be visible here now we are not going to see this will be working only in console if i just come to console and i told you using dom we can add the data we can modify data now if i add apple here i want it should be displayed somewhere else i don't want it to display here okay we can do lot of stuff using dom session using document object model first here in my console if i write this window and you can see here inside my window i'll be having my document as my object okay here you can find you can see my document okay my window is having this document as an object so document is nothing but it is a special type of object now if i in my console if i just give here window i'll just clear this i'll be giving document here now when i click on document you can see my document is nothing but my entire html document whatever content i have inside my html code that will be displayed when i give a document okay for window window is nothing but it is a global object so we don't have to define this window dot document okay it will work but we don't have to define window dot but document is object of windows so whatever properties whatever attributes we want we have to give document dot to access the content inside it see i'll be getting the same output if i give window dot document i'll be getting the same output if i directly give window i'll be getting the same output okay that is if i directly give document then also i'll be getting the entire html document but now uh if i give this document dot document dot h1 i if i want to access my h1 tag you can see here i'll be getting this undefined but instead of this if i just give here document dot get element by id and my id name is you can see here heading we'll see what is doc get element by id later on heading i'll just give the full spelling heading and now if you see this document will access my entire h1 data which is having the id heading okay this is how it will work for window we don't have to give window dot to access the window properties we don't have to give window because window is our global object by default it will understand it is windows object okay and for document document is object of window so for accessing elements inside of html we have to give this document dot and this methods name we have to give we have get element by id get elements by class name okay we look into that but as of now this is just a simple example to access elements inside our html now i'll just clear this screen now if we if we want to display this data using javascript okay we'll just i have created my javascript file you can see here script.js now inside this i'll be writing the same thing console.log i'll just give document dot get element by id and my id name is heading if i just give here if i save this now if i refresh this one you can see i'm not getting any output because i have not linked my javascript file inside my html i'll just come here now if i just link my javascript we know that javascript file can be linked inside head tag inside body and also anywhere inside the script now inside my script tag i'll just give this src and i'll be giving my javascript file now if i save this and now if i refresh this you can see here i'm getting the output as null why because my javascript is executed here i'm accessing this i'll be here okay now if you see here when my javascript is executed here my id is not loaded inside my webpage my id is below my javascript okay it is not loaded so i am getting the output as null there are many ways to fix but the simple way to fix is just copy this one and paste it below the body tag so that everything gets loaded first and then i can access my javascript now inside my javascript it can access easily my heading tag okay now if i refresh this one you can see i got my output here you can see here clearly i got my output that is my h1 element entire h1 element i got as my output okay this is how we will be accessing html elements using this methods and properties also we'll be seeing later on okay using this one now suppose uh we have one event function event functions okay we have one event function that is i'll just give this window dot at event listener and inside this i'll be giving this dom content loaded dom content loaded and inside this i'll just pass my function now inside this i'll just copy this one and i'll be pasting it here okay i'll save this now if i refresh this one you can see i'm getting the output now once i give this window dot add event listener okay this dom content will load all our elements even before css and images gets load okay now if i just copy this script tag and now if i paste here i'll save this and now if i refresh this you can see again i'm getting the output i'm not getting my output as null okay because this has loaded everything before it loads our html and css so we will be having this data inside our dom and we can access it easily and we can print it okay so i am getting this output because it is already having this data because of this event function now i'll just bring it to the normal position i'll save this now i'm just going to remove this entire thing okay this is how it works and using dom okay now if we see here document now inside document i have all this data i have this html i have this heading i have this body okay all the stuff i have now if i want to access my head i will just give here document dot head if i just enter you can see all the data inside my head i will be getting as my output again if i want my body i can just give document dot body and all the data inside the body will be getting me as an output okay i can easily refine this head body okay the content i can access it using dom okay now if i want to change the content now you can see here my heading is dom manipulation you can clearly see inside my title i have given the data as dom manipulation now if i want to change the data i'll just give a document dot title i want to access my title so i'll be giving title and you can see here my title is dom manipulation now it's clearly visible here dom manipulation and now i'll just give i'll just change it to hello world now you can see here my title has been changed here okay it's changed here but it's not changed inside my html it's changed inside this you can see in my project here my title has been changed to hello world now once i refresh this one now i'll be getting this dom manipulation okay we can change the data we can modify we can delete whatever we want we can do using all these concepts of dom that is document object model now here i have this output that is dom session this is my h1 now if i want to change this content okay inside my h1 you can see here i have given the id as heading now i want to change this dom session to javascript i just i will be creating one variable i will be giving my variable name as heading inside this i'll give this document object and i want to access my ib so i'll be using this method get element by id and inside this i'll just pass my id name that is my heading which i have given to my heading tag now here for my variable that is heading now my heading variable is storing this entire element this entire h1 element it is so it is stored inside my heading variable now here dot inner html i'll just give this property in an html property and i'll be changing my dom session to javascript i'll save this now if i refresh this one i'll just give here document i'll save this and now if i refresh this one you can see my dom session that is my h1 this content is changed to my javascript dot get element by id we can access our id and we can change the content inside our h1 element inside our not h1 inside our html elements we can change the content here now you can see here my paragraph is holding this entire stuff now if i want to change my paragraph okay i'll just give here var i will give here para i'll create my variable as para i'll be giving this document dot i'll give this query selector i'll explain what is this query selector and all i'll be giving my paragraph that is my p now inside my para dot inner html i'll just change it to high now i'll save this now this my paragraph is holding this entire content now as soon as i refresh this you can see it is holding only high okay i have changed my paragraph content the entire content to high okay this is how we can change our html content we'll see some definitions on this i'll just remove this i will not remove i'll just comment this everything you can see here javascript can access and change all the elements of an html document it means that html document which is having an entire data entire html elements okay all our heading tag all our body tag all the h1 heading tag paragraph pack all the data html document will be having and javascript can access those elements and it can change all the content we have seen in our previous session that i have changed my h1 dom session to javascript and my entire paragraph to hi okay this is how using javascript we can change the content of our html elements now next we have what is html dom stands for document object model we have already seen this okay it is a standard for how to delete modify add html elements okay we can delete as well i have already shown you in my shopping uh that is my to-do list we can add the data we can delete the data and also we can modify the data based on the code we have written we can do all kind of things using this html dom okay it defines all the html elements as an object we have already seen this now if i give this window and now if i want to access my document i just have to give this window dot document or directly i can give document for windows we don't have to define window keyword for windows properties to access windows properties we don't have to define this window keyword we can directly access using we can only write a document or also we can just write here inner height okay for windows properties we don't have to give window dot inner height window dot innervid okay this also works but we don't have to define this but document is object of window so whatever properties document is having we have to write document and then we have to define that property now if i just give a document then also i'm getting the output okay this is the output and this is my document entire document and it is having all my html content and also properties of all html elements methods to access all html elements methods and properties will be seeing on and firing events to all html elements okay events are nothing but we can add click events we can add on change events we have mouse events okay we have many events okay we can add those events to our html element i can just tell whenever i click on this button my content should be displayed in some other way my content should be highlighted my content should be color it should get background okay we can add all kind of stuff using events okay here i have just written that example where item and document dot get element by the way we have already seen this okay now in my project okay if this is my project i'm not going to explain this okay we will be writing this project again so that we can understand in better way okay what we are doing okay i'll just come to my this file okay i'll just open my file okay this i have just created one project i'll just copy the path now i will be pasting it here now you can see here i have this list items and i have this cross symbols we will not work on this we will create that and we are going to work on that okay so that we can understand how we are creating this one and what are the styles we have applied okay now before moving further i'll just explain you this one we have already seen that one using this i have just created one variable document dot get element by id and my id name is items and i have changed my title to hello world now inside my id name is items here i'll just come to index.html if you see here my id name item i have given to my ua list now me your list is having all this list items you can see all the list items my google list is having here now i'll just copy this part now again i'll just paste it here we'll just see this example and later on we'll see how to create this one okay now you can see here my list item is having all this my url list all this list items it is having okay now as soon as i change my list content i'll just uncomment this one i'll save this now once i refresh this one you can see all the content whatever my url was holding this entire list items these buttons everything has gone and only this data has been displayed okay all the content has been modified and whatever data i have given inside my url list only that is displayed in my website okay this is how we can change the content of an html element okay now what is this get element by id okay i have written the definition it is our method okay methods are nothing but the actions which are performed and html elements like we can add the data we can delete the data we can modify the data you can see here by deleting all my list items i have added that i have added hello world to my user list okay this is how we can add data delete data modify data using this methods okay we have many varieties of methods we have many kinds of methods we will see what are those methods and this inner html it is our property okay property is nothing but it's a value that we can set or replace values for an html element okay i have set this hello world to my url list okay this is how our inner html will work this is just a property using this we can add whatever content we want inside our html elements okay this is all about get element by id and inner html now i'll just comment this one now if i refresh this you can see all my content whatever i have written inside my index.html i got this one and i have just created this using bootstrap we'll see how to create this one now next we have what is html dom objects okay it is the owner of all other objects in our webpage which means that all other objects are html elements okay and document is the owner and all the rest elements it's their children okay you can see it okay our document is the owner you can see a document is owner and all the content whatever it is having those are called as objects and this objects and this properties can be accessed using our document now i have just written some things here type of object we have already seen type of object i'll just clear this one i'll be pasting it here now you can see a type of document is object help of document is object and document is a special type of window object now if i just give you a document we have seen we have this document.all i'll just copy this one and i'll be pasting it here you can see it is giving me an html collection of 12 elements and it is giving you can see here it is giving me html it is giving me head element meta meta meta title body inside my h1 i have this heading button i have script i have whatever i have inside my html i'm getting this data you can see it first i have my html next data then meta tag meta attack meta attack then i am having my title you can see all the stuff all the meta tags all the tags whatever i am having i can just access it using document.all and this will give me an html all collection which means that i can access this using array i can access this using index number now if i just access it using my index number i'll give this document dot all and inside my index i'll just give 2 at index 2 i have this meta tag now i'll just enter this one you can see i'm getting this meta tag and inside my index 2 meta tag i have this one you can see i have this one this is my index 0 this is my index 1 and this is my index 2 and i got the data what i want we can access it using index number as well ok now next i have this document.body we have already seen this if i just give this document.body i will be getting the data whatever i have inside my body you can see only the body content i'll be getting as my output if i give this document.url i'll be getting my file path whatever i have here i'll be getting that file path if i give this document dot url i'll just clear my screen now i have this document.head i'll copy this one i'll be pasting it here and it will give me head content okay inside my head i'll be having this method i have this title okay i'll be getting this as an output now if you see here okay my head my head is having this meta tag one two three meta tags one title and one link which means that these are the children of my head tag now if i just give this document dot head dot children i will just paste it here you can see here inside this i'm getting this everything i'm getting html collection of four data that is my meta tag meta meta tag and title this is how we will be getting html collection of children okay when we are having more than one children we'll be getting html collection and we can access this using index numbers now if i give here document.head and if i just give a three here see i'm getting my title my children number three is title my index at my index number three i have my title 0 1 2 and 3 and that will be displayed okay and my head is having this children meta meta meta title and we can access the children using index number i have this document dot images if you have images in your website then you can just give this now as of now i don't have any images in my website so i'll be getting empty collection of an array okay you can see i'm not having any number and i don't have any data but still i got empty array as my output and the length is zero here here my length is four and here my length is zero okay that's all we can do lot of stuff here we can just access all the elements all the properties using document dot okay whatever properties you want to access you can modify you can delete you can add okay we'll see more about methods and properties and then we'll understand how to add how to delete in more better way and in more advanced way okay now we have already seen this changing the content and i'll just copy this and here i'll be pasting now instead of dom manipulation this content it will be changed to hello i'll save this you can see here it is changed to hello now as soon as i refresh this one it will go because i have not changed inside my javascript i just changed in my console to show you the output okay we have seen this we can access using index numbers i have already accessed this one and changing the content using inside okay this also we can do we can change the content of that particular element i'll just uncomment this one as of now and here i'm getting this i'm just getting the warning that all is deprecated but let's see an example let's see what is this i'll just come to my dom i'll refresh this one you can see here my title has been changed now i'll just uh comment this now if i refresh this one you can see i have my title as dom manipulation as soon as i give i'm coming to this one because at my fifth index um i'm having this title you can see i'm having this title so when i refresh this one my title content will be changed from dom manipulation to javascript whatever content i have given here i am just getting that one okay using this we can change the content we have already seen many times now finally we will come to our selectors this very important section and in this we are going to learn everything about methods okay you can see here i have this get element by method get elements by class name okay i have many methods here we'll see an example on this and then we'll understand what is this now in this session we are going to learn completely about selectors okay we have this get element by id get element by class name we have query selector query all selected get elements by tag name we are going to see this example and then you will understand in better way okay i'll just open my file okay in this index.html i have this basic heading for this i have given the id as heading i have one paragraph i have one input field for my input field i have given type as text placeholder as enter your name ib is equal to name and autocomplete off so that i will not get any suggestion when i try to write there okay i have created one new list okay inside my ua list i have given the id as list i have this list items inside each list items i have given the class name called list items and inside that i have given some fruits name and here i have this button and inside this i have the text read more now we'll be working in this index.html file and using our selectors will try to access the ids will try to access the class names tag names everything and we'll look into the example now i'll just come to my script.js and inside this first i'll just write one comment i'll write comment as selectors now here i'll be creating one variable variable i'll give my variable name as list i'll be giving this document dot first this is my first selector get element by id and in my project i have two ids here one id is heading and one id is list okay i'll be accessing this id i'll copy this and here inside this i'll be pasting this id okay you have to paste in single quota double quote now i'll do console console.log if i just give this variable name here i'll just copy this and here i'll be pasting this one this element by id is going to select which element is having this id that particular element will be displayed as an output to me i have saved this now i'll open my console if i refresh my project you can see in my console i have my list item that is my url list inside this i have audits children you can see i have this list items and inside each list items i have this text you can see i have apple mango pineapple and mango okay using this get elements by id list i have access that element okay particular element this entire rule list and inside viewer list i have all these children so that will be printed as output you can see inside my url list i have all these list items and that will be given me as an output okay when i use this get element by id and id will be only one in index.html which uniquely identifies particular element okay this console i have just separated okay if you want to just click on this and you have your options you can select any one of them i have just separated my console and browser now i'm going to clean this again if i refresh this one you can see i'll be getting this output okay my ui list now this is all about our get elements by id if you want to change the content we have seen many times but again i will be showing you the difference between inner text and text content okay i'll be showing you the difference between them okay here if you see i have inside my list items i have this apple mango pineapple orange and this all things i'll just give here list first i'll give inner text inner text is equal to i'll just give here instead of all these fruits okay i'll just write the heading as fruits i'll save this now if i refresh this one you can see all the content has gone and only fruits stored here okay using this inner text i have done that one now suppose i will save this now i'll bring back my output i have all this list items now instead of inner text i will be using this text content property and inside this i'm going to give fruits again i'll just give fruits one i'll save this now if i refresh this you can see even it is changing the content and whatever content i am having that is been deleted and whatever i have changed here i am getting that output then what is the difference between inner text and text content okay we have basic difference between inner text and text content now if i come here inside my index dot html for my session i'll be creating one span tag and for inside the span tag i'm just going to give my session that is this part okay this entire text i'll just copy this one and inside my span tag i want to paste that now inside this i'll be giving this style style is equal to i'll just give here display to be none i'll save this now if i refresh this one you can see i have only dom and my session has been displayed as none comment this everything now inside below this i'll be creating this heading is equal to i want to access my id document.getelementbyid and my id name is heading now here in my console console.log if i just give here heading heading dot text content heading dot text contents i basically want to display the text content whatever is inside my heading i have this dom and session you can see i'll just refresh this one now if i show you in my console you can see i'm getting this dom session as my output but here i have given style is equal to display to be none now let's see an example of inner text i'll just give here inner text if i give inner inner text here i'll save this i'll refresh this one now you can see i'm getting the output as dom which means that my text content is going to ignore the styling part whatever i have given inside my index.html you can see here i have given display as none which means that it is not getting displayed in my browser but in my console using text content property i can display the content okay dom session i am getting but using inner text i am not getting this session because it is giving attention to the styling part as well my text content is just going to ignore the styling part it is not going to give attention to styling part but using this inner text we can give attention to styling part as well and we are getting only dom as our output okay this is the basic difference between text content and inner text okay this is all about our get elements by id text content and inner text now i'll just comment this everything and also i'm going to remove this span tag from here i'll save this now if i refresh this i have dom session here and in my console i don't have anything now okay now we'll see our next selector that is our i'll just write here one comment and i'll be giving this i'll just copy this one and i'll be pasting it here okay that is our get elements by id now next we are going to see get elements by class name okay you can see here for id we have element for classes we have elements because in our html we have we can have more than one classes but id will be only one now here in my project if you see here i have given the classes name for my list items you can see all the classes name for my list items so now here what i'll be doing is i will be accessing my list items so i'll be creating one variable i'll just give my variable name as list item inside this i'll be giving this document dot get elements by class name you can see gets elements by class name and my class name is nothing but this one this entire thing i just copied my class name and here i'll be pasting my class name i'll save this now in my console if i just show you the output console.log and i want to display my list item i'll save this i'll refresh this one now if you see i am getting html collection of 4 items which means that i am getting 4 list items you can see here i have 4 list items inside this collection i have 0 1 2 3 4. i have length as 4 and inside 0th index i have all this all the data we don't need this one but we are getting html collection of four items you can see whenever i hover on this i am getting here blue line you can see this is my orange this is my pineapple this is my mango and this is the apple okay this is how we can access elements using the class name by using this method get elements by class name now we can access this by using the index number suppose if i want the item number item number three but its index is two so for that i just have to write here console.log inside this i'll be writing this list item and i'll give the id as 2 i'll save this i'll just comment this as of now i'll refresh this one i'll refresh my project now if you see i'm getting the list item you can see it's getting blue here which means that i'm getting pineapple as my output okay using index number we can access individual items and we can change the content okay whatever we want we can just change the content of that here suppose if i just give here inner html or inner text or inner text content i'll just refresh this one now you can see i'm getting pineapple as my output i'm getting only the content inside that element my this entire thing is my element okay this entire thing is my element and i'm just getting the text as my output but this entire element will be getting using this one okay using this i'll be getting the entire element but using this inner html inner text and text content will be getting the text whatever i have inside that element now you can also change the text content i'll just comment this now you now you saw my output is pineapple now i'll just give here instead of this i'll be giving this list item list item my index number two and inner html or inner text inner html i just want to give instead of pineapple i'll just give banana i'll save this now if i refresh this one you see you see here instead of pineapple i'll be getting banana here okay using this one we can change the content inside our html as well okay now we have changed the content and the banana is being displayed here now if i remove comment this one now if i refresh this i'll be getting my pineapple back now we'll see how to access how to give styles to all my list items now for this list item i'll just copy this i'll just copy this list item i'll be pasting it here instead of this i want to change the style style and i'll give color color i'll just give here red i'll save this now if i refresh this one you can see my pineapple has become red color we can change the content as well as we can give the styles to our content now we will see how to give styles to all the contents now suppose for apple i want to give i just can't write like this again and again i can't write like this i'll copy this here i'll be pasting that one i'll write the index number 0 and for my apple i want to give yellow color i'll save this now if i refresh this one you can see my apple has become yellow in color if i have hundred of items then for each item i can't write like this so if i want to apply the same spice and same text so what we will be doing is we will wrap this inside our loops we will see how to do that one now below this i'll just create one variable i'll give my variable name as i here i'll be creating my for loop first i'll initialize my value of i as 0 and inside this here i'll be giving this i is less than this item list dot length we have seen that our length is 4 okay in our browser we have already seen that in our console i'll paste that so i'll be giving this length which means that my i will be 0 1 2 and 3 okay one once it reaches 4 this condition will fail 4 is less than 4 and i'll come out of the loop now here i'll be increasing my value of i inside this this item i just want to access this i'll copy this one i'll be pasting that before that i will just refresh this and be getting normal colors that is black now inside this list items i will be passing i as index so that first time it will be zero second second time it will be one third time it will be two and four time it will be 3 so for each list item i am accessing that one and i will be styling i'll just give style and instead of style color i'll just give background color o uend and we have to use camel case background color i'll just give here hello i'll just oh no i'll give orange let's just check now i'll save this now if i refresh this you can see my background color is orange now you can add any styles now we are not limited to styles i'll just copy this entire thing and here i'll be pasting that one i'll just paste that one and instead of i'll just increase the font size font size i'll just give 25 pixel i'll save this now if i refresh this you can see my font size is also been increased okay using for loop we can change the style of all the elements we can change the content we can change the styles okay whatever we want we can change inside this while loop you can also change the content i'll just give here instead of this if i want to give this inner html and i want i'll just give here fruits i'll save this now if i refresh this you can see all the content has been changed to fruits which means that's all all the list items has been changed to fruits i don't need this part now i will save this now you can see this is my output now once we are done with this selector that is getting the elements by class name now we'll see another selector that is getting element by tag name okay and that i'll just comment this everything i'm just going to comment and also this one i'll just comment now we are going to see our third selector that is tags name okay that is nothing but get elements by tag name i'll create one variable i'll give my variable name as input inside this i'll just give this document dot get elements by tag name you can see here we have this get elements by tag name here and inside this i'll just give my input field i want to select my input field and in my console i'll just print that output okay that is my variable i'll just save this now now once i refresh this and if i open my console which input i have this name and this one you can see here this is my input length is one i got only one input as my output because in my project you can see here i have only one input field that is this one okay inside index.html this is my input field and this i got as an output html collection html this hash is nothing but this one okay my id is name so hash name this is nothing but my id and this is what it has length is one and name of the input field this all properties if you have time you just explore this everything suppose if i have here two input i'll just copy this one and i'll be pasting it here i'll save this now if i refresh my project now i'll show you my console you can see here inside my console i got html collection of two input fields that is this one and my this one you can see and length is two and also my i have here two input fields okay this is how we can get the elements by tag name okay and this will select all the element by that particular name i'll just remove this input field from here now if i just give here li that is my list items i'll give li i'll save this i'll refresh this one now if i open my console you can see i got html collection of four items that is i have four list items here one two three four and my length will be four you can see here my length is four and i'm getting list items of full okay this is how we can get the element by their tag names you can give any name you can also give ul if i give here usual i'll save this and also i'll refresh this one now you can see i got html collection of uil list and inside this i'm having all this url list and id is list you can see here for my url my lbs list and also you can change the content of this elements by using the same method by using the same for loop for this list items is equal to is less than you can just use the same method and you can change the content inside this elements this will work same as get elements by class name okay this is all about getting elements by tag name now we'll move on to our next selector that is our query selector query selector i will create one variable i'll just create one variable i'll give my variable name as list inside this i'll be giving this document dot document dot query selector query selector i just want to select li i'll show you the difference here console.log and just pass my list variable here i'll save this i'll refresh this one now if i open my console you can see i'm getting only one list okay if you see my apple i have the content as apple and my apple is my first list okay this query selector will select only the first element whatever it is having it will ignore rest elements it will ignore and only the first element it is going to select and that will be given me as an output okay if you have many anchor tags and if you want to select only the first one then you can use this query selector and you can get the first anchor tag see you can see clearly i am getting only one list items because of this query selector okay we have another selector called query all selector i'll just copy this one i'll just copy this entire thing i'll comment and here i'll be pasting that one and this is my query all selector if i just give here query all this i'll just show you what it will print i'll refresh this one now you can see it is giving me node list of four list items that is it is giving me all the content all my list items here okay you can see all the list items and the length is full okay this is the difference between query selector and query all selected query selector will give only the first element and query all selector will give all the elements with that particular tag name and also using query selector using query selector you can get the elements you can get the class name as well suppose here i have this id i'll copy this id and here i'll be pasting this id now in uh get elements by id we were directly using this class name without using dot symbol without using this hash you can see here without using hash for id but while you are using query selector then for ib you have to give hash if you are having class then you have to give this dot if you are having uh elements then directly you can write the elements okay now my id is list so i am giving this hash for ib i'll save this i'll refresh this one now if i show you in my console you can see i got node list of url list okay that is having the id list so i'll be getting this output okay this is my output and this id you have to give like this only for id you have to give hash for class you have to give dot if i just give a dot list items i'll just copy this class from here i'll copy this and i'll be pasting it here now without dot if i give and if i refresh my project here if i refresh and if i show you see i'm getting empty list because i don't have this class okay i'll just give here dot i'll save this i'll refresh this one now if i show you you can see i'm getting node list of four list item that is li okay because all my list li is having this class name so i will be getting list items of four you can see all list items i'll be getting as an output okay this is how you can access the element you can change the content inside the element in this also you can do whatever we did here you can change the content everything we can do if i just take this entire example i'll just cop i'll just copy this example from here and here i'll be pasting that example and i'll uncomment this have just created and instead of list item i'll just give list here length i plus plus list dot i style background orange list style i style font size i'll save this now if i refresh this one you can see all the styles have been applied we can change the color as well i'll just give here red i'll save this now if i refresh this one you can see the color is being changed you can also increase or decrease the font size i'll just give 20 pixel i'll save this modifier refreshes you can see the font size has been decreased we can manipulate all html content we can manipulate the styling part we can do everything by accessing those elements and also we can change the content we can change the styles okay we can do lot many things now we are done with our query selector query selector all and also get elements by tag name now changing contents and styles of html elements so we have already seen this how to change the content and how to change the styles of html element like you can see here i have one list item inside this i have just given document dot get elements by class name let's see an example on this okay we'll just write one we'll just write one simple code i will refresh this one this is my normal output where i'll just give i'll just copy this entire thing from here i'll just copy this one and here i'll be pasting that one and instead of input i'll just give here list and also here i'll give list get elements by tag name and also here i just want to give list this is just an example to understand whatever we have learnt till now i'll just save this i'll refresh this one now in my console i'm getting i'm getting this li is not defined get elements by tag name okay this is list i'll save this i'll refresh this one now you can see i'm getting html collection of four list items which means that i can access the elements using their index number i'll create one variable i'll give my variable name as li1 inside this i'll just give this list of 0 and in my console i want to show that one console.log i'll just give li 1 i'll save this now if i refresh this one now you can see i'm getting only the first list item that is my apple here i'm getting hdmi collection of four list items but using zeroth in there i'm getting only first element that is only my first list item now if i want i can change the content li one dot style dot let me give color color i'll just give here hello y e l l o l o i'll give and also here it is dot i'll save this now if i refresh this one you can see my apple color has become yellow okay this is how we can change the content we can do whatever stuff we want we can just do like this and also we can change the background we can change the color we can change the content inside that one we'll see that one i'll just give here li one dot inner html inner html i'll give instead of apple i'll give banana i'll save this now if i refresh this one you can see it has changed to banana i'll just comment this one now you can see it has changed to banana okay this is how we can change the content we can change the styles and also we can access the elements using their index number okay now we are done with this one now we have seen this also accessing all the elements using get elements by class name and changing the content using for loop we have seen this we can also give borders okay we can give all the stylings whatever we do in css we can just do in javascript as well get access the element change the content change the styles okay it's completely depends on you what you want to do now in this session we will see how to traverse a notes okay traversing nodes suppose this is my html document and inside this i have my html inside html i have head and body inside head we will be having this title meta tags and links custom links font links okay all the links and inside my body will be having all this content okay now this html is the root node okay and our html will not have any parent don't get confused with this one suppose this is my html document okay and inside before this html i have this doctype this line is only to indicate that we are writing the code in html okay this html is not having any parent and this is our start of the code okay so html is the root node and it has no parents html is the parent of head you can see head and body html will be having only two child this is head and this is body you can clearly see it html is having only head and body as its children and head is the first child okay you can see clearly head is first child and body is the last child of our html element inside our head we will be having this title meta tags and links you can see here inside our head we can have this meta tag we'll be having title we can also have links to connect to our style sheet we can also have links to font awesome we can also have links to google fonts okay whatever links we want we can just put it inside the head and we can directly connect to that particular link and inside the body we have all these contents we have heading tags we have diff containers we have images we have input tags we have all this stuff inside our body so this is how we can we will be representing our nodes okay inside html we have head and body inside head we have title meta and link inside body will be having all this heading tag divs and images okay now we'll see how to access that one how to access the parent element how to access the siblings how to access the children we'll have a look on that one i'll just come to my project this one now inside this inside my script i'll just comment this everything here i'll be writing session 2 and i'll just write traversing nodes now i'll just create one variable i'll give my variable name as list inside this i'll be given this document dot i will be using query selector query selector and inside this i just want to give this id okay this we have to give hash when we use query selector inside my user list you can see i have this url okay i have this list as my id now first we will see about parent node you can see here first is our parent node and inside this we have these two properties parent node and parent element we will see how to use that one i'll just come here and i'll just show in my console console.log list dot i'll first i'll be giving this parent node i'll save this and next i'll just give i'll just copy the same thing and instead of node i will i'll be giving parent element see in my console if you see here first is my body and second this body which means that my parent of your list that is my ual list is having the parent you can see these all our siblings but my body is the parent so i am getting output as body you can see first also i got body using parent node and using parent element also i got the body okay this both will work in the same way you can use any of this to get the parent of our url list suppose instead of this one if i use my body i'll just comment this everything and also i'll copy the same thing i'll copy i'll be pasting it here and for body i'll be checking instead of list i'll be giving body body document dot query selector i want to access my body element so i'll just give body inside this and here i will just give here my parent now if i refresh my project and if i show you the output you can see my output is html this is first and this is second which means that the parent of body is our html element the parent of body you can see this head is the sibling but parent is html because html is enclosing all the content of body and heading so my parent of body is html okay this is how we can access the parent of our elements parent of our content now here if i access my list items and my list items parent will be my uel list okay if we see an example i'll just copy this entire thing and i here i'll be pasting that one here i'll just give li i'll refresh this one now if i show you in my console you can see i'm getting url list as my parent of my list items okay this is how we can access the parent of any element now we have seen the about parent node and parent element next will be our child node and child element i'll just give here child node child node and child element now we have this previous siblings i'll just remove s from here i'll refresh my project now if you see i'm getting previous sibling as text which means that my url list okay this is my user list i'm accessing this one now this previous sibling i should be getting input text but its previous sibling is giving the text as my sibling because it is counting the text as its sibling so for that we have another substitute like we have for last child that is last element child in the same way we have previous element child remain child i'll just write that one i'll save this now in my console i got input field as my output because my previous sibling of my url list is my input field now if i give next sibling then i'll be getting button as my output okay you can access any element you can access any siblings from this okay using this properties we can access this one i'll just remove this element let's copy the same thing and here instead of this i'll just write this one this is my previous sibling and this is my previous element sibling priya sibling will give me text as my output and previous element sibling will give the actual element what i need now next we have next sibling i'll just copy this entire thing and here i'll be pasting that one now instead of previous we look into our next sibling i'll just remove this previous i'll be writing next i'll save this now if i refresh my project now you can see i'm getting text as my output okay this next sibling previous sibling this first child this all will give me text as my output because it is going to count the line break as well but we have this next element sibling so that we can avoid that one will not be getting text exact output we'll be getting our actual element next element sibling i'll refresh this one now if i open my console you can see i'm getting button as my output because this is my ul list and newer list is having next element is button that is next sibling and this is its previous sibling so if you want you can explore more i'll just comment this one now if i open this i'll uncomment this previous element sibling dot i'll just copy this entire thing and here if i paste that one now this will give me input tag as an output input tags previous element sibling is my paragraph let's just see i'll refresh this one now if you see in my console i'm getting this paragraph as its output you can explore more and more you can just give your previous element sibling dot previous element sibling dot previous element sibling it's going to give me next it is going to give me h1 okay if i give next element sibling i i am having this one i'll be getting that as my output okay you can also give for parent parent node dot parent node you can find its parent and its parent and its parent okay it goes on like family tree okay this is how we are going to work in this now we have seen all this first child first element child we have seen all this now our next section will be creating elements how to create elements inside our javascript we'll see that one now now here i'll just write creating elements here i'll create one variable i want to create one new div i'll just give here new diff here i'll be giving this document dot create element method i'll just give this create element and in insert this what i want to create which element i want to create i have to give that one if i want to create h1 i will give h1 if i want to create diff i'll be giving diff okay let me just create h1 i'll just give here h1 and here also i'll just give here h1 now in my console console console.log if i pass this h1 that is my variable i'll save this i'll refresh my project now if you see in my console i'm getting this h1 without any content only my h1 is created now you can add class name for this you can add ids for this i'll just take this variable and in this i want to add class name i'll be using this property class list or class name i'll be using class name i want to add my class name as heading i'll just add heading i'll save this now if i refresh this one and in my console if you see h1 class is added that is nothing but my heading i can also add id h1 dot i'll just write here id and id i want to add heading heading 1 i'll add i'll save this now if i refresh this one now you can see i have my class name as well as my heading as my output okay class is added heading is added and also we have created the element using this create element method now we can also add attributes for this for adding attribute we will be using set attribute property i'll just write here h1 and inside this i'll just write set attribute attribute let me add title i'll just give here title and in sight title i just want the text as i am heading i am heading i'll save this now if i refresh this one and i'll just open my console now you can see my title has been added and the content inside this whatever i have given here i am getting this one that is nothing but i am heading okay this is how you can create element we can just add the class name we can add you can see we can add class name we can add id we can add title looking whatever we want we can just add this one now if you see i don't have any content inside my h1 that is inside my heading so to create content we are going to use another property another method that is that create text node inside my h1 okay i'll just create one more variable i'll give my variable name as heading text inside this i'll be giving this document dot create i'll just give here create text node and inside this i'll be writing this is my heading i'll save this and now if i refresh this one and if i show you in my console you can see i don't have anything inside my console because whatever text i have written this this i have to append inside my h1 okay that is inside this one so for that what we have to do is this h1 i have created here h1 i'll copy this this variable and i want to append this one so i'll be using this append the child append child property and i want to append my heading text whatever content i have inside this i want to append that inside my h1 now once i append this heading text inside my heading only then this content will be added inside my heading tag i'll refresh this one now if i show you you can see inside my heading this content is added this is my heading okay this is how we will be creating element and we will be adding the content inside the element create element we will create the element create text node we are going to add this text node okay text you can see you can see it clearly this is my heading it's right here this i'll save this and again i'll refresh you can see this is my heading is added now this is not inside my html document okay this is not been added inside my html you can see this heading is not added inside html it's only present inside my javascript okay to add this entire content inside my html okay you can access any element and you can just append that one but here i'll just create one variable diff i'll give the id as um new new element i'll just give here new element i'll just copy this one and also i'm going to save this i'll create one variable i paste that one and i want to access that one we can access the ids using this one document dot get element by id not animations i'll just give here get element by id and inside this i will be passing my id now inside my new element okay this is my variable dot i want to inside this i'll just give here inner html inner html is equal to this one this h1 i'll just copy this and here i'll be pasting that one i'll save this now if i refresh this one here i'll just refresh you can see i'm getting this object html heading element okay this is not been inserted inside my html you can see it clearly and also in my console i'm just getting this as my output but here this is not been added inside my html so for that what we have to do is we have some properties we have insert before we have insert after now i want to add this content inside my body so for that i'll just create one variable i'll give my variable name as body inside this i'll just access this one using this document dot document dot query selector i'll just access this one i want to access my body element i'll just give here body and i just want to add this is my paragraph i'll be accessing paragraph and this heading i want to insert it before my paragraph so i'll be accessing my paragraph as well i'll just copy this entire thing i'll be pasting it here and instead of body i'll just give a paragraph now inside my body i just i'll be giving this insert before i have here insert you can see i have many properties here insert adjacent okay but i'm going to use insert before i want to insert this heading okay this h1 heading i want to insert i'll just copy this one i'll be pasting it here and before paragraph i just want to insert before this paragraph so i'll be writing like this i'll save this now if i refresh this one you can see this is my heading this is been added inside my html also now if i inspect this one i'll just show you in my console inside my elements you can see here before my paragraph this h1 is also been added but here you can't see but in my javascript when i console when i inspect this one you can see this heading is added which is having the class name heading which is having the id as heading one title also i have given and the content this is my heading okay this is the simple way of creating element using create element method create text node we are going to add this content and wherever we want i just have accessed my body if you have one container you can access that container and you can insert that element inside that container also and i have access just paragraph i can also access this input field and i can insert that before okay now suppose here instead of this i'll just give your input and here i'll be giving this input you can give any variable name but this should be having the same input field name here i'll give input i'll save this now you can see here my h1 is before my paragraph now i'll refresh this one you can see my this is my heading is before my input field and also in my console this input field this heading is before my improved field okay wherever you want you can just add this one okay this is how we are going to add the content inside our html as well now we have done all with creating elements creating text node selectors now our next part is events okay that is very important when it comes to javascript okay handling events in our next session we are going to look into that before moving to our event session we have some more properties which we have to see those are very important like we have removing existing html elements by using this remove method we will see how to do that one i'll just come to my project here now here i'll just comment this everything creating elements i'll just access my paragraph here instead of this i'll just access my input field okay i'll be pasting it here i'm going to uncomment this one now to remove this one you can see here we have this remove method so i'll be using that one input this is my variable name input dot remove i'll save this now if i refresh this one you can see my input field has gone okay you can remove the elements when uh you can just give like when i click on this button this element should be removed okay you can use like that okay this is how we can remove html elements i'll refresh this i have my input back now next we have removing the child nodes okay to remove child nodes we first we have to find its parent okay only then we can remove the child of that one so for that i'll just come to my index.html inside this index.html not this one i'll just come to my project here inside this one this is my body and it's pa this body is the parent of all my elements so i'll be accessing now body then i'll be deleting the children you can see here first i'll access my body then i'll access the children and then i'm going to remove that one okay we'll see an example on that only then we'll understand now i just want to remove this button button is the child of my parent i can directly remove the button using this element but if you want to remove the children from its parent if you have one container and if you want to remove the children from that container you can easily remove it okay i'll just create one variable i'll give my variable name as button inside this i'll just write this entire same thing i'll be pasting it here instead of input i'll just give my button element now this is my children i want to access the parent as well i'll just write body i'll just create one variable i will be giving my variable name as body inside this i'll be pasting that one and instead of this input i want body okay this is the parent and this is the child now i want to remove the child so for that what i'll be doing is body dot remove element and we have all this remove child you can see here i have this remove child and i want to remove this child from that i'll just give here remove child and i want to remove this child button i'll just copy this one and i'll be pasting it here i'll save this now if i refresh this you can see the button has gone okay we can remove the elements like this also that is removing our children's okay next we have replacing the content whatever if i have here button in place of button i want to replace some other paragraph i can do it easily okay here i have just created element i have created my text node okay we'll see an example on this and then we'll understand this one i'll just copy this entire thing and in my project i'm going to paste that one so that i can explain you i'll just paste it here now you can see here i have created one variable and inside this i have just created one create element and i have created one paragraph inside this i have just added create text node and i have added this text node i'll just uncomment this and here also i'll just uncomment this now i'm just commenting this one i'll just this i'll just show you in console.log and i'll just show you para i will save this i'll refresh this one now if i come to my console you can see here i have this paragraph create element i have created my paragraph inside this create text node i have this text node this is new and i have appended that node inside my paragraph and in my console i am getting this paragraph with this text now i will be accessing the parent our parent is nothing but our body okay i'll just access this body from here i'll copy this body and in place of this i'll be pasting that one okay i'm just accessing the parent here i'm just accessing one child let me access my paragraph i'll just remove this instead of this i want to access my paragraph in place of this i'll just write one i'll be writing p okay that is my paragraph and i want to access my paragraph element okay this is my parent and this is this one instead of this one i want to replace this is new text okay now here you have this parent dot replace child and whatever paragraph i am having that is nothing but this one and i am replacing with this child now here instead of this parent i have my body replace child i want to replace this paragraph with this one okay this paragraph this paragraph element with this paragraph this is new i'll save this now you can see here now if i refresh this one this entire paragraph has been replaced with this is new text okay this is how we will be replacing our content we just have first parameter will be what we have to replace and where we have to replace next paragraph is where we have to replace and first paragraph is what we have to replace this is how we are going to replace our children text and we are going to write a completely new text okay this is all about replacing removing removing child and removing elements from the body from the parent now our next section next session is our events okay event listener we have many event listener we have this on change event we have on mouse over we are going to see each one of this and ah and then we are going to make one project what all we have learned we are going to make complete one project and we are going to understand the concepts what we have learned till now now we will move on to our event section now this entire file i'm just going to create one new file i'll comment this here i'll be creating one file i'll give my file name as event.js and inside my index.html i'm going to link that file i'll just come here and here i'm going to link that file event dot i'll just create my script app first script src and i want to link event dot js file now i'll just comment this script dot js now i'll be working in my event.js file for my events now inside my button i'll be adding one simple on click event okay on click i'll just add one alert alert and inside this i'm just going to write hello i'll save this i'll refresh this one now when i click on this read more you can see i'm getting this alert and it's saying hello i have this okay i can click on this okay you should be careful with the single quotes and double quotes if outside if you are using double quotes here inside you have to use single quotes or as you are getting this error okay you can see i'm getting this error because of that so i'll be getting this error so i'll be using a single course now once i use here single quotes i'll refresh this one now when i click on this it's working and i'm getting this alert it's saying hello here okay this is the simple event now we have always seen that inside whenever we click on this we used to pass one function my function or any function and inside this function i'll just enclose this with double quotes now this function we used to write inside our javascript file here i'll be defining that function function and my function name is this one my function and inside this function i'll just write here one console.log and inside this i'll be passing one text i am click i'll save this now if i refresh this one and i'll just open my console also here if you see if i click on my console i'm getting this i am click the text here if i click on this read more text i am getting this i am clicked here how much time i click this number is getting increased here okay this is how we used to pass earlier times now this is the old way of passing the functions inside our buttons okay now we are going to use our new functions that is our event listeners new methods that is our event listener and we are going to pass in this way now here i'll write one comment a new method below this i'll access my button i'll just write here button and for that i'll just use this document dot get element uh not get element i'll just use your query selector and i want to access my button element i'll just write here button now for this i'll be adding event listener so we can add like this button dot add event listener first i'll just add here click click functionality and inside this i want to pass the function i'll just write here function function i have just written the function and here i'll be writing this one okay i have just added one event listener add event listener method and inside that i am passing this click event this method will take two parameters first is my event and this next is my function you can either use normal function or you can directly use our arrow function fat arrow function now inside this i am just going to pass this console.log i'll be pasting it here instead of i am clicked i'll just write here javascript i'll save this now if i refresh this one i'll open my console now when i click on this you can see i'm getting error my function is not defined okay from here from my button i'm just going to remove this now i don't need that one i'll save this again i'll refresh this one now when i click on this read more you can see i'm getting this javascript okay this is also working which means that this is also working and this is all this also works but we are going to use this method this is the new method before everybody were using this one now we are moved on to this one okay that is our event functions and we are going to pass like this we can either pass like this or we have another way of passing this one i'll just copy this entire thing and here i'm going to paste that one now instead of writing this entire function here i'll just write my function name i'll just write my function name as my function you can give any function name you don't have to close with parentheses here open and close parenthesis okay i have added now now i have to define that function here i'll just copy this function from here and here i'll be pasting that one okay you can either use this named functions or you can directly give this function and inside this function you can pass this anything now i'll be save i'll save that one instead of this i'll just write here web development i'll save this now if i refresh this one i'll just come here now if i click you can see i'm getting web development as my output okay you can either use this function directly you can pass the function and you can write the console or directly you can use this named function and later on below or above you can define this function okay even that works and even this works now inside this function i'm going to do some changes here where i'll just select my list items i'll just select my list items list items i'll just give here document dot get element get elements by tag name okay get elements by name no i'll just give get elements by class name i'll be using class name here class name and inside this i will be passing my class name that is nothing but this one this list items i'll copy this and here i'll be pasting that one okay i'm just i have just accessed that one now for this i'll just show you my output in my console if i just show you in console.log console.log and here i'll be passing this list items copy this and here i'll be pasting that one i'll save this i'll refresh this one now when i click on this you can see here i'll be getting html collection of all the list items whenever i click on this on this button you can see i'll be getting like this now i want to change the content when i click on this button so for that here i'll just copy this list item i will just copy this here i'll be pasting that one here i'll just give her style dot background i'll give background color background color let me give orange i'll save this now when i click on this i'll be getting error i'll refresh this one now when i click on this you can see i'll be getting an error it's telling that cannot set background color of undefined html button because it is getting confused that which element it should be applied okay because i have four list items that is my html collection so for that i have to wrap this inside my for loop only then it will work so here i'll be creating one for loop and inside this i'll be giving variable i zero i'll just give here i is less than my dot length items dot length and i'll be initializing the value of i now inside this i am just going to pass this one and here instead of this i'll be writing i i'll save this and also here i'll put semicolon i'm going to close this one i'll save this now if i refresh this one now when i click on this you can see it's getting orange you can see all my list items have taken the background color as orange i can also give margin so that i can separate that one i'll just copy this entire thing and here i'll be pasting that one instead of background color margin 2 pixel i save this now if i refresh this one now when i click on this you can see i got margin of 2 pixel which means that i am getting some space here from bottom above top i'll be getting some margin for this using this i can access the individual elements and also when the click of the button i can change the content as well i'll just copy this entire thing and here i'll be pasting that one i'll be writing this inner html inner html i'll be giving vegetables i'll save this now if i refresh this now when i click on this you can see all the content has been changed to vegetables okay this is how we are going to add event functions to our buttons and when the click of the button we can change the content and styles whatever properties we have seen before like changing the content changing the font size we can apply all those things inside this for loop and we can change that everything in when i click on this button okay this is all about event listener okay now next we are going to see about event what is event i will just comment this everything now next we are going to look into our event parameter event parameter otherwise known as event argument also i'll just write here argument now event it is nothing but it is an object which contains all the information all the actions that we perform okay like when we click on the button that means that the event has occurred the event has triggered and our event is nothing but click okay click event function when we click on the button event is occurred so we'll just see an example on this and then we'll understand what is actually event i'll just come on top i'll i'll just copy this and here i'll be pasting that one i have just accessed my button and for that i have added one event listener click and inside this i'm just writing this function now here i'm going to define that function function my function name is my function inside this i'm going to pass my event argument and i'll just show you in console.log i will be passing my event here i'll save this now if i refresh this one i'll open my console now when i click on this you can see i'm getting this mouse event and inside this i'm having all these properties okay our event is nothing but object and we can access this properties using dot symbol object name dot and this all properties we have this offset text we are going to look into this and we also have this target you can see target is my button when i click on this button i am getting this so my target is my button ok now we can access all this instead of writing this event you can just write here e okay this is the short form instead of writing even we can just write e even this works i'll refresh this one now if i click i'm getting the same output you can see i'm getting all this output now now i want to display all this content inside my html so for that i'll be creating one new element and i'll be adding text to that and i'll be changing the content okay so that we can have a revision of all the concepts we have learned till now i'll just comment this everything for creating new variable i'll just create one variable i'll give my variable name as h1 inside this i'll be writing this one document dot create element create element and i want to create h1 below this i'll be creating one variable text and inside this i'll be giving this one document.createtext node this is new heading now i want to append that one i'll be using this append child okay we have already seen this so i'm going little faster text now if i show you in console.log if i show you my h1 i'll save this now if i refresh this one now in my console you can see i have this heading and this is new heading okay i have this text as well now i want to open this inside my body so for that i'll just access my body variable body dot i'll just give this document dot query selector query selected and i want to access my body element now inside my body i want to append append child i want to append my h1 i'll save this now if i refresh this one you can see this heading has been added inside my body and i got the content this is new heading now i'll just copy this entire thing button and here i'll be pasting that one i'll uncomment this one now now for this you can see i have my button and i have added one event listener i'll just copy this function and here i'm going to paste that one now inside this function i'm going to access this heading tag so for that i'll just add one id for this for my h1 h1 dot id i'll just give the id name as title i'll save this and now if i show you in my console if i refresh this now i have this id called title now i'm going to access that id to access that id i'll just create one variable title i'll just give this document dot get element by id get element by id and inside this i'm going to pass my iv that is nothing but my title okay now title dot inner html i am just going to pass this whatever i am i'll be getting here that i am going to pass first i will just give here e i'll save this now if i refresh this one now when i click on this you can see i'm getting object as mouse event that we got in console as well if i do console that'll then also i'll be getting console.log if i just give here e we have already seen this i'll refresh this one now when i click on this you can see i'm getting this mouse event that is nothing but my object okay i'm just showing in my browser so that you can understand now we also have i'll just remove this console and you just want to print it here we have this e dot type we can find the type of this only then it works i'll just give here type i'll open my console i'll refresh this one now when i click on this you can see i'm getting this click here also i'm getting this click we can find type we can also find the target i'll just write here target i'll save this i'll refresh this one now when i click on this you can see html button element that is my target element in my console also i'll save this now if i refresh this one you can see i'll just remove this now i will refresh this one now when i click on this you can see my target is my button okay i'm targeting my button so i'm getting that one okay this is how we can access all the properties of uh of our event object we have some more now inside my button here i'll just give here class name class i give btn and also for this i am going to give id id i will just give here btn btn i'll save this now i can access id as well now instead of this one whatever element i am targeting for that i want to see the class name what class name it is having class name i'll save this i'll refresh this one now when i click on this it is having the class name btn i can also give the id instead of a class name i can also give here list class list i'll save this i'll just give it list i'll save this now when i refresh this one now when i click it is giving me the same output if i give here id i'll save this now if i refresh this one you can see i am getting my ibs beating and btn this content is getting changed because inner html i have added this one so this content whatever i have written here that is getting changed to this one we have many properties like another property if i show you we have this client x client to buy also i'll just show you um client x i'll save this i'll refresh this one now when i click on this i'm getting 50. i'll tell you what is this 50 in my console i'll just give that one i'll just copy this and here i'll be pasting that one i'll refresh this one now when i click on this i'm getting this 53 first time i got 50 and next time i'm getting 53 because uh this represents x axis client tax client x represents x axis wherever i click suppose if i this target element whenever i am clicking see this number is getting changed okay this will give me the numbers from my browser window this client text will give from the browser window we have another property that is our offset x which will give from the content value itself okay we also have client y client y uh here also i'll just give here y here i'll give y and in caps i'll just give here y i'll save this multiply refresh this one you can see i'll be getting this y-axis values okay from the browser window i'll be getting this values for better understanding we'll do a project on this and then we'll understand in better way we also have this offset we also have offset x and here also i'm just going to give offset x refresh this one now when i click on this i'm getting the buttons but we have some basic difference between offset x and client x client x is nothing but the values whatever we are getting that we are getting from the browser window but using offset we are getting the values from the actual element okay from the actual element whenever the button is clicked this is my entire element and from here from here it is counted okay x axis and y axis from within this element the values are counted for my offset x for client text from my browser window this entire thing will be counted and values will be given to me we also have some more properties like we have alt key you can just explore this one we have alt key i'll just write here key i'll just copy this and here i'm going to paste that i'll save this now if i refresh this one now you can see i'm getting false because this property tells whenever i click on alt alt when i press on alt k and when i click on this read i'll be getting through i'll refresh this one now i'm clicking on alt now i'll be getting my value as through okay this is how it works in the same way we have control key and also shift key shift key let's see for shift key here shift key i'll save this now i'm not pressing shift key i'll click on this i'll be getting false again i'll refresh now i'll click on my shift key now when i press on this you can see this arrow is also getting changed and i'm getting the value as true okay this is how we can access the values and we can just print the output for this now we are done with this basic events and basic event properties we have seen now we are going to see our next event functions that is our mouse event function i'll just comment this entire thing i don't need this one now i'm just going to comment this i'll save this i'll refresh my project okay now we are going to see about mouse event now to look into example of mouse events okay here i have already created one diff and i was i commented that one previously i'll just uncomment this now if i refresh this one you can't see this diff container i'll just write my style tag here inside this style i'll just copy this id from here and here for this id i'm just going to give that some styling i'll just give with 100 or i'll just give 200 pixel height i'll give 200 pixel and background color i'll be giving a look i'll save this now if i refresh this you can see this is my container and also i'll just give margin margin top of one rim i'll save this margin top i'll save now if i refresh this i got margin top of one ram and this is my container okay which is having yellow background and with this 200 pixel and height is 200 pixel for this we are going to see we are going to add mouse event listeners for this i'll just create one variable i'll give my variable name as that one new element i want to access that one so for that i'll be using this document dot get elements by id get element by id inside this i'm going to pass this element that is my id okay now for this i'm going to add event listener for my new element i'll be adding this add event listener and inside this first i'll be passing my mouse down mouse down event mouse down you can see here mouse down and inside this i will just write here function now from above i'll just copy this function i'll just copy this one and i'm going to paste that function here i'll just close this now inside this function i will be writing this console.log console.log e dot type i'll just write type i'll save this now if i open my console i'll refresh this one now when i click on this you can see my type is mouse down okay whatever i have given here this function that i'll be getting as my output okay mouse down is nothing but whenever i click on my left mouse button only when i click on my left button mouse that time i'll be getting this function we have mouse down we also have mouse up i'll just write here mouse up i'll save this now if i refresh this one now when i click and when i leave this one i'll be getting this mouse up function now uh we have mouse enter function i'll save this i'll refresh this one i'll open my console now when i enter this box i'll be getting this mouse enter function we also have this mouse out i'll save this i'll refresh this one now when i come out of this box i'll be getting this mouse out function okay we have mouse leave we have many functions we have many event functions you can just see that one mouse leaf function i'll just leave this see when i leave this i'll be getting this output mouse leaf function okay this is how this is all about mouse functions you can just explore this one we will be having all the explanations about this how it works and when to use these functions but this is the functions we are going to use in our projects as well now i want to change the background color of this box okay we have we have seen that offset x and offset y using that we can get the values inside this one x axis and y axis and also using client x and client five we were getting the values now for this project we are going to use offset x and offset y and we are going to change the color of the box now here this is my element i am just going to copy this i will be pasting it here for this i want to change the style and i want to change the background color background color here i will be passing my rgb value rgb which is nothing stands for red green and blue inside this i am going to pass the value this will take three parameters for red i will be passing e dot offset x for this i am going to pass that one and i am going to concatenate the values now now here i just want to pass my e dot offset y offset y okay now this also i'm going to concatenate and i'll just separate it with i'll just give some random value i'll give here 23 okay this is how i will be passing my rgb value okay this this is my first value this will take the values whenever i click on this and this is my second value i have just concatenated that one and this is my third value 23 i'll save this i'll refresh this one now when i click on this it's not working okay it's not working because here uh when i click outside see it's working because i have given the function as mouse leaf so instead of this i'll just change it to click now um i'll refresh this one now when i click on this box you can see this box color is getting changed based on the values i'm getting now in my console it's not now in my console if i just show you the output console.log and i'll just give this e dot i'll paste this one and i'll copy the same thing and instead of x i will be giving y i'll save this i'll refresh this one now in my console you can see i'm getting this x and y values and based on the values i'm getting this color change now suppose if i just give here mouse leave i'll save this i'll refresh this one now it's not going to work now as soon as i come outside it is going to work okay this is how we are going to use click functions and we can change any content inside our this one now i can also change the body element now here i'll just access my body body is equal to document dot query selector document dot query selector and i want to access my body now instead of this new element i'll just give your body i'll save this i'll refresh this one now when i click now when i leave you can see my body color is getting changed i'll just give here click instead of mouse leaf i will be giving click here i'll save this now if i refresh this one now you can see whenever i click on this box my body color is getting changed you can see my body color is getting changed and we can use this is just a simple to explain how it works uh this is how we can change the content we can change the styles as well this is all about our mouse events now next we are going to see about input events now we are done with our mouse events i'll just comment this one now next event is our input event input events now inside my index.html you can see here i have already created one i'll just refresh this one now i have this box in inside my index.html i have this input field and for this i have given the type as text now suppose i have multiple input fields like type is equal to text type is equal to email type is equal to submit and i want to select this input field with the type as text so for that what i'll be doing is i'll just create one variable i'll give my variable name as input inside this i'll be giving this one document dot get query selector i'll be using query selector query selector and inside my query selector i'll just give my input field name and inside square bracket i'll just give here type is equal to my text if i have email i can just give email now i want to select type is equal to text so i'll be giving this one and this is going to select me input field with text suppose if i give here one more input field and for that i will be giving the type as email input and type i'll just give email now as i refresh my project you can see i have this input field with type email and this is my text now i'm just selecting my type input field which is having the type as text i'll just do console.log and if i pass this input i'll save this now if i refresh this one now you can see i am getting this input field as my output okay which is having this id is equal to type is equal to text now instead of this text if i give here email i save this i will refresh this one now you can see here my type is equal to email okay this is how we can access the input field okay when we have input field and if you want to access particular input field then we can just use this type is equal to email and we have to write this input field without any without giving any space write this one type is equal to email type is equal to text type is equal to password okay we can give any type and we can access that element now here i'll just change the type to text and now for my input i'll be adding event listener input that add event listener and i'll just add one um i'll be adding key down okay you can see key down and inside this uh i'll pass my function my function now i'm just going to define that function here so for that i'm just going to copy this copy and here i'll be pasting that one inside this i'll just write here console dot log e dot type i'll save this i'll open my console now i'll refresh this one now you can my function is not defined my function if you nc okay i'll save this now if i refresh this one now you can see here i have this input field i'll just comment this input as of now i'll refresh now i have given key down key down means now here when i click on any of the key suppose if i click on s when i click that time i'll be getting this when i leave this function will not be triggered when i click on this only that time it's going to trigger and i'm getting this number is getting increased you can see here i'll clear this again if i click here this key down event is triggered okay we have key down we have another function we have another event function that is our key up i'll save this i'll refresh this one now here now when i click on this this function is not going to trigger as soon as i leave that key this function is going to trigger you can see key up function we have another function that is a key press whenever i press on some key that function will trigger i'll refresh this see whenever i press as soon as i leave it's going to stop okay this is how key press will work now whatever values i have i want to access that values in instead of this paragraph i want this value to be printed here so for that i can just access my paragraph here using this document dot query selector query selector and i want to access my paragraph element and in inside my paragraph i'll just give here inner html inner html and i'll just pass this e dot type and i want to access the value not type i'll just give here target i want to access its value whatever i am targeting that is my input field and whatever value it is having inside that i want to access that one now i will type something here now you can see in place of paragraph this is getting typed okay whatever i type here that is getting typed inside my paragraph and all the content inside the paragraph has been deleted and i will be getting this as my output okay this is all about our input functions once you get to know about this then you will get to know more about our input functions and you can practice more and you can explore more we have focus on blur functions as well event functions i'll just comment this everything now i don't need this i'll comment i'll refresh this now next we have blur and focus functions blur and focus functions event functions basically it is event functions now for this um i'll just copy this entire thing and here i'll be pasting that one i'll uncomment this now instead of this key press i'll just write here focus and also i'll copy this and here i'll be pasting that one i'll refresh this now whenever i focus this i'll this event will be fired and i'll be getting focus as my output okay we have blur instead of focus event we have blur as well we have blur i'll save this now if i refresh this one now you can see as soon as i move as soon as i leave my focus then this event will be fired and i'll be getting blur as my event function that is my type we have many functions we have cut we have paste we have input okay you can just explore this one this we are not going to use much in our projects and much in real time but we have to know that this function this event functions also exist okay we have cut we have paste we have input okay we have many functions now we will see our next event functions that is as select change functions here i'll just create one select element inside this i don't need this name and id i'll just remove this and here i'm just going to pass options will just pass three options here inside value i'll just give here one two and three here i'm just going to write one below i'll be writing two and here i'll just write three i'll save this now if i refresh this one you can see i have this select and inside i'll just comment this one i don't need that box now now you can see i have this one two and three as my options inside my select select item i have all these options now we will see how to handle these events i'll just write here select event functions now for this i'll just create one variable i'll give my variable name as select i'll just access that one document.queryselector i'll copy from here and i'm going to paste it here query selector and i want to select my select element now for this i am going to add event listener add event listener inside this i'll be passing change function okay this function will occur whenever i change the option then this function will occur here i'll just write my function name my function and i'm just going to copy this function and here i'll be pasting that function now if i refresh this one i'll just come here now when i click on when i select when i change my options you can see this event function is occurring that is my change okay this is how it works whenever i change the options this function change event function will occur now we will see our final event that is a submit event and finally we are going to make our project and we are going to end this session now below this i'll just create one form and inside this form inside this form i am going to create input field type is equal to text and i'll be creating two input field and last i'll just give here input and type i'll just give here submit i'll save this and now if i refresh this you can see i have this three input field and my submit button here i'll just come to event javascript file and here i'll be writing this submit event function now below this i'll just copy this entire thing here i'll be pasting that one instead of select i'll just write here submit and i want to select my form i want to select my entire formula in this form field i'll just remove this action i'm just selecting this form field and i'll be accessing that one now instead of this let me just give here form here also i'll be giving form you have access that one now here instead of this i'll just give a submit event function my want my function to be executed and inside this function i'm just passing this function my function control okay i'll save this i'll refresh this one now whenever i click on submit you can see my submit i'm getting this but it's going within a blink of time everything is getting submitted i'm not getting the exact output what i want so to avoid that one we have to use here e dot prevent default okay we have to prevent default submitting here we just have to write here prevent default e dot prevent default i'll refresh this one now when i click on submit you can see my submit function is executing and this function is triggered and i'm getting this output okay that blink i was getting if you add this line this will just prevent submitting our form i'll just refresh it again now if i click on submit you can see it's submitting but within a blink okay so to prevent that one we are just using this line and we'll this function will be triggered and we'll be getting this as our output okay now we have seen almost all the concepts of dom document object model dom manipulation now finally what all we have learned until now we'll make one project we'll put all the concepts into that practical project and we understand all the concepts and later on you can create your own projects using dom manipulation and you can create beautiful dynamic website now we are going to create simple to-do list apps so that whatever concepts we have learned we will be applying in this project and we will revise all the concepts what we have learnt okay i have created my folder called dom project inside this i have two files index.html and script.js inside my index.html i have written this basic snippet i have changed my title to simple to do list and here i'll be linking my bootstrap css link okay so that we don't waste our time in styling part okay here i have this bootstrap website from here i'll just copy the css link and here i'm going to paste that one and i'll remove this entire thing i don't need this part i'll just remove this now inside my body and here you can see i have linked my javascript file that is my script.js script.js now inside my body i'll create one diff i'll give my class name as container not this i'll just give container inside this i'll just come to bootstrap website and here i'll search for form i'll just click on this and i'll be selecting this basic form i'll copy this and here i'll be pasting that one i'll save this now if i i'll just copy this part now you can see here i got this basic form i don't need this email everything ctrl b and from here i'm just going to remove this entire thing this entire thing i don't need and also this i'm going to remove and instead of this one instead of this this i don't need this label also i'll be removing from here i'll save this now if i refresh this you can see i have only one input field and my submit button and my placeholder has been changed and the type of the input field is text for my container i'll just give here margin from top and bottom i'll give five i'll save this so that it will not stick on top now if you see i have this margin top margin that is margin by top and bottom i'll be having five now below this i want my uea list and inside that whenever i add the items and whenever i click on submit new list item should be added so for that here i'll just type list list group okay i'll be selecting this one list group flush okay so that i'll be having this underlines i'll just copy this and below this form okay below my form i'll be pasting that one now i'll just come to my project now if i refresh this you can see i have this url list and this list items now for this i'll just remove this spaces unnecessary spaces for my form i'll just give ib as um add form and for my url list here i have this class i'll just give ib as list for my button i'll just give margin only from bottom i'll give margin bottom three i'll save this now if i refresh this i have some space i'll give more i'll give both from top and bottom margin five i save this now if i refresh this i have some space now whenever i add the item this will be added here now if i add item i want to delete that item so i want your cross symbol here so for that in my list item here i'll be adding one button button and inside this i'll just give here x and all or i can just give here and times but let it be x i'll save this now if i refresh this one you can see i have my button here i am just going to add some class class is equal to btn btn danger this is bootstrap class now my button will become red you can see i have this button but i want this button here on my right side so for that we have to give one more class that is nothing but our float right i'll save this now if i refresh this you can see i have my button here i want this button in all my list items i'll just copy this button from here i'll copy this and here here here and here i want to paste that one i'll save this now if i refresh this you can say i have all my buttons i have my list items i have my input field i will be entering something here and when i click on submit this should be added here and this course symbol should be added and when i click on this cross symbol everything whatever i added that should get deleted now if i click it's not working now if i click this is not working because we have not added any functionality yet we will be writing javascript code for this and we are going to use all the concepts what we have learnt till now now i'll just come to my script file script.js file and inside this first i'll be accessing my form and my list item so for that i'll just create one variable called form inside this i'll just give this dot get element by id and for my form i have given the id as add form this i'll just copy this and here i'll be pasting that one okay i have accessed my complete form now i want to access my list item url list for this i'll create one variable list item inside this i'll just take this entire thing i'll paste it here and instead of add form i'll just give my id that is my list okay inside my ul i have given the id as list okay i have accessed my form and my list item now for my form i'll be adding event listener and whenever i click on submit okay whenever i click on submit only then the item should be added so here form dot add event listener and our event listener is submit okay we have already seen this and inside this i'll be passing this target element that is nothing but our event event argument and inside this whenever we click on submit the form should not be submitted by itself so to prevent that we are going to use this one e dot prevent default e dot prevent default method only then our form will not get submitted now here if you see this is my input list and whatever i enter into this list that value i need so for that we have to access our input field i'll be accessing my input field here here i'll just give one variable new item new item and inside this i want to access my uh this one this input field for this i'll just give one id id i'll give it as item now i'll be accessing this i'll just copy this and here i'll just write this document dot get element by id and inside this i'll be pasting that id i'll just do console.log console.log and inside this i will just pass this new item i'll save this i'll come to my project i'll refresh this one now if i inspect this you can see in my console i'll be getting i'll refresh this one okay it's not working i'll just click on submit button now when i click on submit you can see i'll be getting input field as my output okay whenever i click on submit in my console i have just printed this new item now i don't want this input field as my output i want whatever value i enter that i want so for that i'll just write here value i'll save this now if i refresh this and here if i type apple and if i click on submit here you can see i'll be getting apple as my output okay this is what i want whenever i click on submit this apple should be added here okay now i have access the value of my input field i'll just comment this one now i have to create one list item so that whenever i click on submit that new list item should be added inside my unordered list so to create new list item i'll create one variable l i inside this i will be giving this document dot create element create element and i want to create my el i okay now inside this i want to add the same class whatever class this list item is having you can see in this list item i have this class name i will be adding the same class name i'll copy from here li dot class name inside this i'll just pass this class name whatever i copied from there i will be pasting that one okay that class name should be same only then it will be added now inside my list python li dot inner html i want to store whatever value i'll be getting from here i want to add that one we have already seen that if i type apple i'll be getting apple as my output so whatever value i am getting from there i want to add that item inside my list item so inner html will be equal to my new item okay now once i create my list item i want to create this button also whenever i click on this when apple gets added this list this button should also be added so for that i'll create one variable i'll give my variable name as button and inside this i'll just give this document dot create element create element and i will be creating my button element now for this i'll be adding the same class name whatever my that wrong symbol is having button dot class name and inside this this button whatever class name it is having this entire thing i'll just copy from here and here i'm going to paste that one okay same class name we have to add only then it will float to right now inside my button the text inner html it's nothing but our x okay whatever we have given here i have this x symbol so i'm i have just given here x okay i have created one list item i have created one button i have added same class name for both of them whatever i have inside my index.html now i have to append the child only then it works i'll just do inside my list item i want to append this child that is nothing but my button i want to append my button element and inside my url list okay here i have access my user list and inside this user list i want to append my entire li append the child i want to append this list item which is having the list content and button and that both i am appending to my ual list now we are appending elements so we should not enclose with single quotes or double quotes i'll refresh this one i'll just append apple now when i click on submit you can see apple and this button has been added okay only within this few lines of code we can add new list items here now if i add here mango i'll just write mango mango now you can see i don't have mango when i click on submit my mango and this cross symbol has been added and this files have been applied because we have added the same class name inside those elements and that list item okay this list item is appending the button child and this entire url list okay which is which we have already accessed here and that is appending the entire list item which is holding the list content and our button okay now once we have added elements now we have to remove the elements from here now whenever i click on this it should be removed i'll close this here for my list item this i'll just copy from here i'll be pasting it here for this i'll be adding add event listener add event listener and i'll be adding click function for this whenever i click on this only then it should work or else it should not work here i'll be passing this event okay event argument now inside this you can see here inside this function i'll just write here console console.log and i'll just show you e dot target i'll save this now if i refresh this one i'll just open my console here now when i click on this this is targeting my list item so i'll be getting list item as my output now when i click on this cross symbol now you can see this is targeting my button so i'll be getting button as my target element and that will be my output whatever i target that will be given me as my output now inside this i'll just check one condition if i'll just write here e dot target dot i'll just give this class class list okay class list and using this contains method i'll just check that if my class name is having this out of this cross symbol i can take any one of this i can either take float right okay this is unique for all my buttons or i can also take button danger i'll just take this button okay it's simple i'll just take this one and here i'm going to paste that button button class okay i'm just checking if that particular target if it is having this class name only then remove that so inside this i'll just create one variable i'll give my variable name as li and in in here i'll just store one value e dot target whatever i am targeting if whichever element is having this button as class i just want to target its parent element now in my html my buttons parent is my list item so i have to access this list item and i want to delete this entire thing so here e dot target dot i'll just write here parent element parent element of my button now if i show you in console console.log console.log and i'll just pass here li i'll save this now if i refresh this one now you can see i don't have anything now when i click on this cross symbol i'll be getting its list item that is this list item is the parent of this button so i will be getting this list item and i want to delete this entire list item from my uel list okay now using this one i got the parent element of my button now i want to remove this parent element so that the cross symbol and the content whatever it is having that will be deleted so here i'll just write my list item dot we have already seen this remove child method remove child inside this i want to remove this li list which is having the parent which is the parent of my button and i'm targeting the button and inside this variable i have stored that one and using this remove child method i am removing the child from my list item i'll refresh this one now when i click on see it's getting removed now when i click on this it's getting removed now i can add new items i'll add apple submit you can see apple has been added now when i click on this it's getting removed and the parent is nothing but my list item i have removed the console now if i just uh uncomment this one i'll refresh my project now when i click on this you can see the parent is my list item and the content is this whatever i have and my cross symbol here okay this is how we can create simple to do list app we can add the content and we can delete the content okay we have seen the concepts whatever we have learned okay some basic concepts we have applied in this project we have done with our dom manipulation session practice this one prepared more projects practice a lot and explore more there are many even functions explore that one implement those event function in your projects and make your projects more dynamic and more beautiful thank you so much for listening have a great day

Channel: Step by Step

Views: 2,804

Keywords: dom in javascript, dom in javascript in hindi, dom javascript tutorial, dom, dom manipulation in javascript, dom elements in javascript, document object model javascript, document.querselector javascript, document object model dom, dom manipulation for beginners, dom for beginners, javascript dom for beginners, queryselector for beginners, what is dom, complete dom manipulation course for beginners, javascript tutorial, javascript for beginners, complete responsive website, crud

Id: 5gqjq1zoyxI

Length: 133min 55sec (8035 seconds)

Published: Sat Jul 10 2021