JavaScript DOM Full Course | Document Object Model JavaScript Complete Course

in this video we will learn about document object model in JavaScript you will learn all concepts of JavaScript Dom with example here are all JavaScript Dom topics that we will learn in this single tutorial we will learn about what is Dom what is nodes and type of nodes then we will learn selecting elements using these methods which is get element by ID get Elements by class name get Elements by tag name get Elements by class name then query selected and query selected all after that we will learn about traversing element where we will learn about selecting parent element child element and sibling element after that we will learn about manipulating the HTML elements where we will learn to create an element using Create element method then append child text content and all these methods after that we will learn about attribute methods where we will learn about get attribute set attribute has attribute and remove attribute after that we will learn about manipulating elements a style using a style property CSS text get computed style class name property and class list property after that we will learn about JavaScript events where we will learn about what is event what is event bubbling and event capturing how to handle the event using event handler attribute then we will learn about Dom level 0 event handler then we will learn about add event listener and remove event listener then we will learn event objects and different type of events so before starting this tutorial please hit the like button and also subscribe my channel great stack now let's start the video now we will learn about document object model the document object model is an API for manipulating HTML documents the Dom provide functions that allow you to add remove and modify part of the document effectively the Dom represents an HTML document as a tree of nodes in this HTML code you can see this is the node this HTML tag is a node this head tag is also one node this title tag is a node this text great stack is also one node this body tag is a node this comment is a node and this P tag is also a node now let's understand about the node type so this one is the document type node these HTML head title body these are the element type node and these text are the text node and this is the comment node now let's learn about node relationship any node has relationship to another nodes in the Dom tree and it is same as described in the traditional family tree for example this body is the child node of this HTML node and this HTML node is the parent node of this body node this body node is the sibling of this head node because they share the same immediate parent which is HTML element now let's add some other content within this body here we will add one tip and add this P tag within this div let's duplicate this so we have 4p tag in this div so this div element is the parent node of these P tag and the P tag is the child node of this div this one is the first child and this one is the last child this second p is the next sibling of the first one this third p is the next sibling of the second one and the fourth one is the next ceiling of the third one in same way you can say the first one is the previous sibling of this second P the second p is the previous sibling of third p and the third p is the previous sibling of fourth p now let's learn about selecting elements using Dom to get elements in JavaScript there are various method in Dom so the first one is get element by ID method get element by ID method returns and element object that represents an HTML element the get element by ID is only available on the document object let's understand this with one example here I will remove this comment and I will add only one text in P tag and for this P let's add one ID so I am adding the ID message and in this P we have the text JavaScript Dom now let's add the JavaScript in this HTML page using the script tag within this script tag we can add our JavaScript code here we will add one variable with the name MSG which is message and we can write document dot get element y ID and here we have to add the ID of this element which is message so this document dot get element by ID will select this element and it will be stored in this message variable now we can print it let's add console.log MSG here you can see the output in console tab PID message JavaScript Dom so this element is printed in this console because I am adding console.log MSG so in this msv variable we have stored this element which is in the P tag if the document has no element with the specified ID then it will return null Suppose there is no element with this ID on the web page then it will return null you can see null and if there is multiple element with the same ID it will return only first element let's duplicate it and in this one we will only write JavaScript now you can see the output in console it is still printing ID message JavaScript Dom so it will select the first element with this message ID because the ID of element is unique with the HTML document the document.getelementbyid is a quick way to access an element now we will learn about get Elements by name method every element on HTML document may have a name attribute multiple HTML elements can share the same value of the name attribute let's take one example here we will create one input field and in this input field I will add the type radio and we will add one name attribute name will be language and value will be JavaScript we can add another input field with the same attribute and value will be something else python in this HTML code you can see we have two elements with the name attribute and we can select this element using this name so in this script we will add let BTN is equal to document dot get Elements by name and in this one we will add language because the name value is language now we can print this let's add console.log vtn and you can see the output in the console tab here we have the node list that contains two input field you can see input and input so get Elements by name returns one list of nodes now we will learn about get Elements by tag name the get Elements by tag name method accepts a tag name and return a live HTML collection of elements so let's understand it with one example in this HTML we will add one title in H1 so the text is first heading let's duplicate it this is second this is third this is fourth we have four text here in the heading tag now we can select the element using the tag name which is H1 so here in this script we will add one variable with the name heading is equal to document Dot get Elements by tag name and here we will add the tag name which is H1 now we will print it using console log heading so you can see the output on the console tab it is returning the collection of four HTML elements you can see H1 H1 H1 4 times so this get Elements by tag name return the collection of HTML elements now we will learn about get Elements by class name they get Elements by class name method returns an array like of object of the child elements with a specified class name the get Elements by class name method is available on the document element or any other element also so let's understand it with one example here we will add one class name in the first title so the class name is message in the second one we will add the class name message and in the third one also we'll add the same class name message let's delete the fourth one now we can select these elements with the class name in this script let's add let MSG is equal to document Dot get elements by class name and here we will add that class name which is message now we will check the output in console MSG and you can see the output here it is returning the collection of three HTML element with the class name message you can see H1 Dot message H1 Dot message H1 Dot message so it is returning all the HTML elements with the same class name now let's come back to the code and here we have added document dot get Elements by class name we can add this get Elements by class name on any element also so let's see the example here I will add one div and insert these two title in this div and for this div we will add one ID let's add the ID container so total we have three headings with class name message but these two headings are enclosed in this div with the ID container now we will add the get Elements by class name over this container so we have to store this container in one variable so let's add let count is equal to document dot get element by ID and the ID is container now we can write count here instead of document we will add cont which is container and get Elements by class name now it will only give the elements within this container you can see the output here we have only two elements HTML collection 2 we have two HTML elements in this collection H1 Dot message H1 Dot message so this get Elements by class name will return the collection of HTML elements with the same class name on the document or within the element now let's learn about query selector and query selected all method the query selector method allow you to select the first element that matches one or more CSS selector the query selected is a method of element interface we can apply this on element also here we will add one variable let MSG is equal to document dot query selector and in this query selector we have to add the CSS selector so in CSS to select this title we used to write Dot message because it's a class name so we used to write Dot message to select this element in the CSS file so we have to add the same thing here we have to add the CSS selected in this query selected that's it so here we will print console.log MSG so first let's see the HTML code here we have one title with this message another title with this message and third title with this message so total we have three title with this message class name now let's see the output in console tab here it is displaying only first element H1 class name message first heading so let's come back here you can see we have added query selected only so it will return only first element now we will add query selector all after adding query selector all you can see it will display all the elements we have node list of three element which is H1 message H1 message and H1 message so it is returning all three headings and if I remove this all and write query selector only it will only return the first element here we have added query selector all on document we can use the query selector all on any element also so let's add count for container is equal to document dot get element by ID here we will add this ID container now we will add this query selector over this container so just add container dot query selector so it will give only two elements which is here second heading and third heading now you can see the output in console tab here it is displaying node list 2. it is displaying Two element so it is selecting only two elements which is in the container with the class name message now let's come back to the previous example document dot query selector all now let's see what we can add in this query selector so we can add the class name using dot so we can add the ID also We'll add the ID and we can write this container we will add hashtag and this container because we used to write like this for CSS selector hashtag container because here we have the ID container so we can add the hashtag to select the element with the ID now we can add like this directly div so it will select this div element if we just write H1 so it will select all the heading element with H1 tag we can write like this also div and H1 so it will select the heading within this div you can see the output here we have 2h1 only now come back and we can select the multiple element like this div also and H1 also so it will select all the development and all the H1 element by adding one comma you can see here we have four element node list four one is div with the container ID and 3 H1 tag with the class name message so basically we can add all the CSS selected in this query selector and query selected all method now we will learn about traversing elements to understand how to get the parent element how to get child elements and how to get the siblings of an element to get the parent node of the specified node in the Tom tree we can use the parent node property in this body let's create some HTML elements we will add one div with the ID title and within this div we'll add one text in P tag welcome to Great stack and for this P let's add one class name text so we have one parent element and one child element now we will try to get the parent element using this child element so here in this script We'll add let txt is equal to document Dot query selector and we will add Dot T text so it will select this P element now we have to get the parent so we'll add console.log then txt which is the child element Dot parent node this one just add this parent node and it will display the parent element of this child element so now let's see the output in the console tab here you can see it is displaying div class title which is the parent element now let's learn how to get the child elements we will learn about how to get the first child Element last child element and all children of the specified element so here we will add another example just remove it and within this let's create multiple P tag we have four text here later stack one two three and four so we have 4 title welcome to greatest stack one two three four so now we'll get the child element using this patent element now within this script first we will select this parent element so let parent is equal to document dot query selector and write the query selector title so it will select the div now we have to get the first child last child and all the children of this div so here we will add console.log and this parent then we will add first child now you can see the output in console tab here it is displaying #text because here we have some space so this space is also one empty text node if we remove this and write it in the same line now you can see the output in console tab it is displaying the first title which is welcome to Greater stack one and if I add a space here it will display one text node now I want my text like this and I want to display the first element so here we will just add first element child like this parent DOT first element child now you can see the output it will display the first element welcome to Great stack one the first title in P tag similarly we can add last element child like this and see the output it is displaying welcome to Greater stack 4. right so it is giving the last element which is welcome to Greater stack 4. now if you want to get all the child elements just add child nodes that's it after adding this come back to the web page and here you can see we have node list text again P again one text again P so we have the empty text node then P tag let's come back and here if I remove this a space and write everything in the same line like this now you can see it will only display for element which is 4p element so we got the child nodes of this div now we will learn about how to select the next sibling and previous siblings of an element so in this example in this second P tag we will add one class name let's add class name second like this so it's easy to select this element and according to this element we will find the previous siblings and next siblings so here we will add second head also second so it will select this welcome to Greater stack 2. now to get the previous sibling here we will add this element then Dot and write previous element sibling that's it you can see the output it is displaying welcome to Greater stack one so we are finding the previous sibling of Welcome to Greater stack 2. now just come back and here we will add next so it should give this welcome to Greater stack 3 because we are selecting this second one and we are adding next siblings so it will display third now let's see the output head is displaying welcome to Great stack three so this is how you can select the previous siblings and next siblings now let's learn how to manipulate the HTML elements so the first one we will learn is create element to create an HTML element we use the create element method the document dot create element accept and HTML tag name and return a new node with the element type so let's understand it with one example here we can add document Dot create element and in this one we have to add one HTML tag so let's add the div tag so it will create one div element we can store it in any variable so we'll add let div is equal to document dot create element div so it will create one development now we can print it let's add console.log div you can see the output on the web page it is displaying this div this div is empty right now so let's come back here in the next line we will add dip dip Dot inner HTML we will learn in our HTML also so here we can write any HTML code we will add one P tag and in this P we will add welcome to Great stack and close this p foreign here you can see one div and here we have one text in this p we have one div tag and within this div we have P tag and the text is welcome to Great stack so you can see using this document dot create element we can create one development or any HTML element and we can add any HTML code within this element and we can print it and we can also add this element on our web page so to add this element on our webpage here let's add document dot body we will add this element on the body so here we will add body Dot happen child we will learn the append child later so to insert this newly created div in this body we are adding appen child div so after adding this come back to the webpage you can see we have text here welcome to Great stack right so this is added using this app and child div that we have newly created within this body you can see we have not added any text in div or P tag we are creating this element using this document.create element if I change it welcome to Greater stack 2 you can see it will be deflected here welcome to greatest act 2. now we can add the ID or class name anything in this newly created element so here let's add div dot ID is equal to title let's see here we have this div with the ID title now we can add the class name also just write div dot class name title and you can see the output here class title so we can create a new element using document dot create element and we can add the content here we can add the ID we can add the class name or any other attribute next we will learn append child method we use append child method to add a node to the end of the list of child nodes of a specific parent node the append child can be used to move an existing child node to a new position within the document so let's create some HTML elements here here we will add one UL tag with the ID menu so we can easily select it here we will add some content in Li form second one is about third one is blog right you can see these elements on the webpage home about blog let's come back let me add one more here we will add project now within this script we'll add let menu is equal to document dot get element by ID and the ID is menu so it will select the thank you UL element now we have to create one element and we will add that element in this UL so here let's add let list is equal to document Dot create element and the element tag name is Li so it will create one Li element and its name is list so in this list we will add inner HTML and through this inner HTML we will add one text contact like this now we can use menu Dot happen child list so this is the element which is here ul and this append child will add this list at the end of this list in this list we have home about blog project so it will add the newly created list item after this project so here we have created one list item and the text is contact so this contact will be added after this project you can see on the webpage here we have home about blog project and after this project we have contact that we have created using this create element and added using app and child in this UL so this newly created list will be added at the end of this list next we will learn about text content to get the text content of a node and its descendants you can use the text content property so let's see one example here we have the same HTML elements in this script we have added this line that will select this UL element and after that remove this and here we will just add console.log menu so it will display the complete menu in the console tab now we just want these text so here we'll add menu Dot text content that's it menu dot text content and see the output in the console tab here it is displaying home about blog and project so it will ignore the HTML tag and display only text now let's see one more thing here if I write inner text we are adding inner text and see the output still it is displaying home about blog and project but there is one difference this inner text is following the CSS also in this last one if I add a style display none so it will be hidden from the web page you can see that is not visible so this inner text will return only visible text you can see here we have home about blog and these home about blog is here on the web page but we have one more element here project which is invisible but if I write text content it will display all the HTML text content you can see on the webpage we have home about blog only but here it is displaying home about blog and project so this text content is displaying all the text inside that element and inner text is displaying visible text only now we can use the text content to insert the text also let's add menu Dot text content is equal to hello so in this menu right now we have these list so it will remove this list and it will add hello let's see the output here you can see we have only hello and this webpage so we can read and add the text using this text content on the web page next we will learn about inert HTML so inner HTML is used to add the HTML code on the web page so here we have added text content so instead of this we will add inner HTML and see the output on the webpage you can see we have hello so it is in the normal text so here if I write H1 it will add this hello text in heading so it is in heading style hello so this inner HTML accept the HTML tags and add the text on the web page but instead of this inner HTML we will add text content now you can see what will happen it will add this as a plain text H1 is also displaying here and if I add inner estimate it will add this text and this hello text will be in the heading Style you can see this hello text on the web page next one is after method we can use after method to insert one or more nodes after the element so this is the Syntax for after method we have to add the element name then after method and we have to pass a new node that we want to add after that particular element suppose we have this menu element so we can write this menu then after method in this one we can pass a new element and we can create a new element using the create element method this after method can accept multiple nodes so we can add multiple element after this menu it can also add a string after the element so we can add multiple string str1 Str 2 like that we can add multiple string after this menu element so so this is the use of this after method now let's learn about append method so this append method is also similar as append child but in the append method we can add multiple elements this is the Syntax for append methods we have to add the parent element then append then we have to pass a new element that we want to add in that parent element so this new node or new element will be added in the patent element at the end of the list of Childs so what's the difference between append and append child so this append will accept multiple nodes and it can add string also the next one is prepend Method so this is the Syntax for prepend method parent node.playpaint and new nodes so it will add the new node as a first child in this parent node so this is the prepend method the next one is insert adjacent HTML so this is the Syntax for insert adjacent HTML here we have to add one element then insert adjacent HTML method and here we have to give position and text so suppose we will add this element menu and we want to add one text at the end of this list so here we have to give the position so the position can be before begin after begin before end and after end so suppose we add before begin so this element is starting from here so this before begin position means it will add the new node before this ul and if we add after begin it will add it here at this position and if we add poison before end so this is the end so it will add before end here it will be added in this line and if we add after end so it will be added after closing of this UL so let's test it here we will add any one position I will add before end let's add before end and here let's add Li contact like this so here I am adding one html text and this is the position and this is the element where we want to add this so you can see the output on the web page the contact is added here now let's come back and if I add after begin so it will be added here at this line because this is a starting of this element and it will be added here you can see the first one is contact and after that home so this is how this insert adjacent HTML works now the next one is replace child here is the Syntax for the replace child method replace child method is used to replace the child element with the new one so we can use this syntax we will add the parent node then replace child method here we have to add the old child that we want to replace and here we have to add a new child that will be replaced on the place of whole child next one is clone node method we can use clone node method to clone an element here is the Syntax for clone node method we will add the original node then clone node so this new node will have the another copy of this existing node if I add menu so this new node will have one copy of this menu element let's print this one here we will add console.log new node you can see the output it is displaying UL Li menu now let's come back and here we can pass the argument so if I write true it will clone this descendants also this UL element and these Li elements Also let's come back you can see we have ul and all these Li and if I remove it or write false by default it is false we don't need to write but if I write false you can see here we only have UL element and if I remove it still it will be only UL and if I write true it will clone the element and all the child element also you can see ul and all three Li so this is the Clone node method next one is remove child method to remove the child element of a node we can use remove child method here is the Syntax for remove child method here we have to add the parent element and then write the element that we want to remove from the parental mat so here let's add menu and from this menu suppose I want to remove this last one so here we will add menu Dot last child element so it will remove this blog you can see on the webpage here we have home about blog is missing if I write menu Dot first element child so it will remove the first element which is home you can see on the web page here we have about and blog so this is the remove child method next one is insert before method we can use insert before method to insert a new node before an existing node as a child node of a parent node here is the Syntax for insert before method we have to add one parent element then this insert V4 method and it will accept two arguments in this one we have to add the new element that we want to add and we have to add the existing element before that existing element this new element will be added we have the parent element menu so we'll add menu here and we want to add the new element before this Li that home link so here we'll add menu Dot first element child so this new node will be added before this home so this is the insert before method so these are the methods to manipulate the HTML elements now we will learn about attribute methods so let's understand what is attributes here I will add one HTML element input type is text we will add one ID so let's add the ID username and we can add the placeholder also username so in this HTML tag we have added three attributes which is this one this one and this one this is the attribute name and this is the attribute value the ID is the attribute name username is the attribute value this placeholder is the attribute name and username is the attribute value now how we can get the attributes of any HTML element using JavaScript so let's add one script tag here where we will add our JavaScript code first we have to select this element so we can use any method to select the element let input box is equal to document dot get element y ID I am using get element by ID method and we will add this ID username after selecting the element we can find the attributes available in this HTML element so to get the attribute we will just add the element which is input box and after that just add attributes that's it it will give all the attributes available in this HTML element so to print this in console we will add console DOT log and add this code input box dot attributes after adding this let's come back to the webpage and you can see the console tab it is displaying type then ID then placeholder so we have three attributes in this HTML element now we have some attribute methods to get the attribute value and to set the attribute of any HTML we can check for some attribute whether it is available or not and we can also remove the attribute using the attribute methods so let's see the first method which is get attribute so instead of this we will add the element which is input box and here we will add get attribute and in this get attribute we have to add one argument so we will add the attribute name so here we have the attribute name type so just add type like this and after that let's come back to the web page you can see here it is displaying text so we can read the value of the attribute using the get attribute method let's take another example here I will add this placeholder write this placeholder here now it will display the value written in this placeholder attribute so come back to the web page here you can see it is displaying username this username text is available in the placeholder attribute so this was the first method get attribute to read the attribute value now we will learn about second method which is set attribute so let's remove this one here we will add the element which is input box on this input box we will apply set attribute and this set attribute will accept two argument so the first argument will be attribute name and the second argument will be attribute value like this here we will add the name comma value like this so let's remove this here and here we will add any attribute name so let me add the class so the attribute name is class and here we will add one value let's add the class name user like this so it will add 1 attribute which is class and the value is user now to see the updated input let's add console.log and here we'll add input box so it will display this complete element on the console so let's come back to the webpage here in this console you can see we have the input element with the type text ID username placeholder username and there is one more attribute which is class user that we have added using this input dot set attribute class user so this was the set attribute method now we will learn about next one which is has attribute so it will tell us whether this attribute is available on the element or not it will result in true or false so here we'll add another example we will add the element input box then has attribute and this will accept only one argument so in this one let's add class and it will return one true or false value so we can directly print this one so just add console.log input box has attribute class so you can see in this input field we have the type ID and placeholder we don't have class here so it should return false let's see the output you can see it is displaying false now let's come back and instead of this class we will add ID so it will return true let's come back to the webpage you can see it is displaying true in this console so this has attribute will return true or false value if the attribute name is available in the input field it will return true if this attribute name is not available in the input field then it will return false so using this has attribute we can check the availability of that particular attribute on the element next we will learn about another method which is remove attribute that will remove the attribute from the element so in this one will add element then remove attribute and in this remove attribute we will add one attribute name that we want to remove so here we have type ID and placeholder so let's try to remove this placeholder just copy this one paste it here so this remove attribute will remove this placeholder from this input element now we will just print this input element in the console we will add console.log input box and now we will see the output in console here we have the input element and in this input element we have type text ID username but here we don't have the placeholder because in this code we have added remove attribute placeholder so it will remove this placeholder attribute from this element so these are all four attribute methods now we will learn about manipulating elements a style to manipulate the style of the element we have the property called style and we can use this style property to get or set the inliner style of an element so here we have the HTML element which is input and in this one we don't have any inline style so let's add one style here and here we will add the background color value is read and let's add one more CSS property here that will be font size 20 pixel so in this HTML element we have added the inline CSS in this one we have added the background color and font size now to get these inline CSS we can use the style property on this element so here let's add the element which is input box dot Style so it will return the CSS properties available in this input field in the inline CSS it is returning some values so we can add console.log and this code now you can see the output in the console tab in this console you can see it is displaying background color and font size because here we have only two inline CSS properties which is background color and font size so this element dot style will return the inline CSS available in the element now if you want to return the background color value or the font size value then we can write input box style Dot background color like this after adding this come back to the webpage here you can see it is displaying red background color value is red now if you want to see the value of this font size here we will add font size and you can see the output here in the console tab it is displaying 20 pixel so we can get the property name also and value also now we can use this as style property to set the style of the element so let's add input box and on this input box we will add a style and in this style let's add one new CSS property let's add padding padding is equal to 10 pixel after adding this we will display this input in the console so we will add console.log input box so it will display this input field in the console tab where it will add the padding also so let's come back here you can see we have this input element in this one we have the style background color then font size and after that you can see this padding let's select this one here you can see padding and the padding value is 10 pixel so using this style property we can get the inline CSS and we can also set the inline CSS now we have one more option to add the inline style in the HTML element that is using CSS text so here we will add the element then style then CSS text and in this C access text we can add the CSS so let's add width 200 pixel after adding this let's print this element in the console you can see the output here on the web page it is displaying this element with the style width 200 pixel here we have only one CSS property which is width 200 pixel let's come back to the webpage we have added CSS test with 200 pixel so it will override the existing inline CSS you can see we already have background color font size but it is not available on the webpage why because we are adding width 200 pixel using this CSS text so it will override completely it will remove this and add this one but if you want to keep the existing CSS also and add this one also then you can use the concatenate who performed the concatenate we will just add plus before this assignment operator like this after adding this again come back to the web page now you can see in this input field we have the multiple CSS properties which is background color then we have font size and width also so after adding this concatenate we can use the existing inline CSS also and we can add a new inline CSS using this CSS text we can add multiple CSS properties at the same time you can see we have added bits so we will add more CSS properties just add semicolon and add another CSS property let's add height height will be 100 pixel now we will come back to the webpage you can see height is also applied in this input field you can see it in the console also here we have height 100 pixel so using this CSS text we can add multiple CSS properties in the HTML element as a inline CSS so this was the use of CSS text for modifying the inline CSS of the HTML element now we will learn about get computed style method currently we have learned how to modify and get the inline CSS properties of the HTML element using JavaScript now how to get the CSS properties written in the external CSS so let's remove the CSS from here remove this inline CSS and we will add the CSS properties in this head here we'll add style tag within this style we will add the CSS selector input and for this input we will add the background let's add the background color red and font size 12 pixel so we have added two CSS properties for this input element now how to get these CSS properties to get the CSS properties of this input element we will use get computed style method so let's see the syntax first this computed style method is a window object so we will add window Dot get computed Style and in this one we will add the element we can add one more argument that will be pseudo element so this is the Syntax for get computed Style in this one we will add the element if you want to get the CSS property of the element and if you want to get the CSS properties of the pseudo element then you have to add the element and its pseudo element and now let's see the example for this input field so here we will add window Dot get computed Style and in this one we will just pass to the element which is input box now it will return the CSS properties available on this input field so we can print it using console console.log and add this one now let's come back to the web page to see the console tab here it is displaying all the CSS properties that are applied by default on the element in this one we will find the background color also you can see the background color here and there will be font size also it is here font size so now we can get the value of the particular CSS property so from this input box we will add font size now it will display the value of this font size you can see it is displaying 12 pixel that we have added here in external CSS now let's add the background color okay we are adding this window dot get computed style then passing this element and from this element we'll get the value of this background color let's come back to the webpage edit displaying the color now let's come back in this one we'll add one more property let's add the width of 300 pixel and here we'll add Dot width then we will see the output it is displaying 300 pixel so using the git computer style method we can read all the CSS properties applied on any HTML element now we will learn about class name property class name property returned a list of classes separated by space so let's take one example here we will add one title in H1 tag so let's add the text greatest stack and with this H1 we will add one ID to select this element we will add the ID title and let's add some class name also so let's add the class main the first class name let's add one more class name which is message so in this one we have added two classes which is Main and message now to get the class name of this element we will use the class name property of JavaScript so let's add the JavaScript here in this script tag first we have to select the element so let's add the variable with the name title and select the element using document dot get element by ID and write the ID title after that we will add Titan Dot class name that's it it will return the list of classes available on this element so it is returning some value then we can print this one in console let's add console.log title Dot class name that's it now we will come back to the web page now it is displaying the classes available on this element which is Main and message so we have two classes we can use this class name property to add a new class also so let's come back here and here we will add title Dot class name is equal to new so this will add one class name which is new in this element let's remove this class name here we will display the complete element in the console using this console.log title let's see the element here you can see it is displaying this HTML element with ID title and class new we have only one class which is new but in this HTML you can see we have already added Main and message so this will overwrite these classes here we have two classes that will be removed and this new will be added in this class but if you want to keep the existing class also and new one also then you can use the concatenate using this plus and this assignment operator after adding this here we will add a space and let's come back to the webpage now you can see the same element H1 here and in this element we have class main message and new so we have total three class here so using this class name we can read the class name of the HTML element and we can add a new class also now we will learn about class list property class list return the collection of CSS classes so let's see if we add class list and it is returning some value so we will print this one title.classlist like this we are just adding title Dot classlist and you can see we already have Main and message class in this element now we'll come back to the web page in this one you can see we have a list where we have Main and message class so we have two classes so this class list is returning the collection of classes available in any HTML element so this was the first use of this class list to display or get the class list of any HTML element now we can use this class list to add the class to remove the class so let's understand how we can add a new class using this class list so in this title element we will add classlist dot add like this we are adding classlist dot add and in this one we can add a new class just add new like this that's it after adding this we will display this complete element in console tab we are displaying this title let's come back to the web page here you can see we have this element with three classes main then message then new let's change the size so you can see we have total three classes main message and new now let's come back if I add multiple classes we'll just add a comma and add a new class name like new to so we are adding another class name like this we can add multiple classes using this class list you can see we have more class name here main message new and new to so using this classlist dot add we can add a new class name in the HTML element now we can use this class list to remove any class so instead of this ad just type remove classlist dot remove and what we will remove we already have Main and message so let's remove this message write it here in a quote and come back to the webpage here you can see in this element we only have one class which is Main now just come back and we can remove both classes so let's add comma and write main so it will remove the another class also we can type multiple class name here and it will remove all that classes from that element you can see this element in this element we don't have any class we have the class attribute name here but we don't have any value in this class next we can use this class list to replace any class so instead of this remove we will add replace and to replace this one we have to add the existing class name and new class name so in this HTML element we have message so write message here and we are adding a new class name instead of this message so we'll add MSG so instead of this message we will replace it with MSG now just come back to the web page you can see the output in console here we have class name Main and MSG so we are replacing this message class with MSG class using this class list dot replace now we have one more option to check whether the class is available or not for that here we will add classlist dot contents and in this one we'll add any class name so this message is here we are adding message so this will return the value either true or false if this message is available in this element then it will return true if it is not available it will return false so we will just print this one remove it from here add it in console and come back to the webpage you can see it is printing true because this message class is available in this element so we are adding class list dot contents and class name this class name is available in the element that's why it is written in true suppose we add MSG and this MSG is not available in this element then it should return false you can see the output it is false now we have one more thing which is toggle let's see this example here we will remove this one we will just print this complete element in console and here let's add title Dot classlist dot toggle and in this toggle we can add any class name suppose we add message what will happen if this message class is available in the element it will remove it this toggle means if the class name is available it will remove it and if it is not available then it will add that class name in the element so what will be the output this message is already there and we are adding toggle message so it will remove this message let's see the output in console here you can see class main here we have only one class which is main so this toggle remove this message class now instead of this message we will add new so what will happen this new is not available here so it will add this new in this element let's come back to the webpage again and now you can see we have total three class in this element which is main message and new so using this class list dot toggle we can add and remove the class from the element if the class name is already there it will remove it and if it is not there it will add the class so this was all about class list property in JavaScript now we will learn about JavaScript events an event is an action that occurs in the web browser when we click on the web page that is a click event when we move cursor over the web page that is mouse move event and when the web page loads that is a load event like that we have multiple type of events in JavaScript let's create some HTML elements here I will create one div with the ID container and within this container we will create one button with the button tag and button type will be button and here we will add the text click here now we will come back to the webpage beautiful here you can see this button click here if I click here nothing is happening because we have not added anything so let's come back you can see we have added the button and clicked on this button but when we click on this button we are actually clicking on the button this div this body and this HTML and this document also so when we click on any element actually we are clicking on the all the patent elements also that means this dip with the ID container then body then HTML and test document and in modern browser this click goes up to window object there are two event models that is event bubbling and event capturing so when we click on the button click a start from the button then goes to div then goes to body then goes to HTML and then goes to document so the event flows from the most specific element to the least specific element that is event bubbling but when the event starts from the least specific element it means it starts from the document then event flow to HTML then it flows to body then it flows to dip with the ID container then it comes to the Target element which is button so this event model is known as event capturing when the event starts at the least specific element and flows towards the most specific element we may respond to these events by creating event handlers an event handler is a piece of code that will be executed when the event occurs so when we click on this button we will add some code that will be executed after clicking on this button so that code is known as event handler and event handler is also known as event listener so there are three ways to assign event handlers so first one is using HTML attribute for each event there is event handler and their name typically begins with on so let's see the example we have click event and for this click event we have the event handler on click like this so let's assign this on click in this HTML element as an attribute so in this HTML element We'll add on click so this is the event handler of the click event and within this code we can write the JavaScript so let's add a simple JavaScript line console DOT log so it will log one message in the console of the browser in this one let's add some text here we cannot add double quote because we have already used so I'll add single quote button clicked so this button clicked message will be printed in the console when we click on this button so let's see this on the webpage this console is emptied right now and if I click on this button that is here in top left corner you can see this message button clicked this event handler attribute can call one function also so let me remove this HTML code we have added event handler which is on click and this on click will call one function so here let's create one function in script tag in this script we will add one function with the name display MSG that will display message here we will add console.log button clicked let's add some more text button clicked from FN which means button clicked from function now we will call this function when we click on the button so in this attribute we will call this function write this function here so this is a function call now let's come back and you can see this console is empty and if I click on this button again you can see the message it is saying button clicked from FN it means button clicked from function now just come back when the event occurs the web browser passes an event object to the event handler so to understand this one let's remove this function here and we will add JavaScript code in this attribute so here let's add console.log and when we click on the button the JavaScript will pass the event object so we can write that event object here event now we can see what is there in this event object let's see the output so you can see here we have one object now this event object has some properties that we can access so from this event we can find the type event DOT type let's see it is displaying the event type event type is Click let's come back we can add the target so we will get the target element on which the event occurs when we clicked on the button it is displaying the entire button element with all the attributes so it is giving the target element we can also use this keyword inside the event handler and this keyword inside the event handler refers to the Target element let's see the example here in this event handler we will try to print this this keyword will refer to the Target element let's see the output when we click on the button you can see again we got the target element which is button so this keyword inside the event handler refers to the Target element from this keyword we can find the properties of this element so let's add one ID here I will add the ID is equal to BTN and here we will add this dot ID so when we will click on the button it should display the ID value let's see if I click on the button it is displaying BTN now just come back and instead of this dot ID we can simply add ID from the event handler we can directly access the elements property so we are adding console.log ID so it should display this ID value let's see if I click on the button we got the ID value which is BTN if I write type which is here we will get button it's here so this was the first method to add the event handler in HTML as HTML attributes now the second method is adding event handler name in the JavaScript so let's remove this on click from here we have one button let's remove this type also it will be simple so we have one button with the ID BTN now we'll add the script where we will add the JavaScript So within this script first we have to select this button so let's add let vtn is equal to document dot get element y ID and we'll add the ID BTN so we have selected this button element now on this vtn we can add the event handler just add on click and now we can add the code that will be executed when we click on the button so here we'll create one function and within this function we will add console.log and this will print message button clicked foreign after that let's come back to the webpage click on the button and you can see the output in the console button clicked let's come back you can see here we have the HTML element and in this one we have added the JavaScript in this JavaScript we have added on click event handler name and added one function that will display one message here also we can write this keyword that will refer to the Target element and from this we can find the ID this dot ID let's see it is BTN now to remove the event handler we will simply add element which is BTN dot on click and assign null that's it when we assign null in this event handler it will remove the event handler so this was the second method to assign the event handler now we will learn the Third Way of assigning event handler so in JavaScript we have two methods with the name add event listener and remove event listener these are two methods that handles the event add event listener will register an event handler and remove event listener will remove an event handler so let's see the example of add event listener the add event listener accept three arguments the first one will be event and the second one will be one function this function will be executed when the event fires and the third argument is use capture so the third option is optional because by default it is false this use capture is a Boolean value it can be true or false so by default it will be false and we can remove it it is related to the event bubbling and event capturing so let's ignore that third parameter we will pass to argument event and one function so let's see one example so let's try to add this add event listener on this button remove it here we'll add BTN dot add event listener and will pass first argument which is event so the event will be click we are adding The Click event then a comma here let's define one function here I'm adding function like this so this is the function definition within this curly braces we can add the code that will be executed so here let's add console.log and message button clicked so we have selected the button using get element by ID then on this button we are adding add event listener method that will assign the event handler so in this event listener we are adding first parameter and second parameter first parameter is event so the event is click and the second parameter is a function so we have declared one function here this function will print one message in the console tab when we will click on the button let's see this output on web page click on this button and you can see the message button clicked as I already said when the event occurs the JavaScript passes the event object to the event handler so in this one we can pass the event object and we can find the type from this event event DOT type let's see the output if I click on the button we got event type which is Click now instead of adding this Anonymous function we can add the external named function also so let's remove it here we can add our second parameter before adding that second parameter let's create one function with the name display message and this display message will log one message button clicked now we can refer this display message function here like this after adding this let's come back and if I click on the button again you can see the message button clicked so we can add the event name and one function it can be a Anonymous function or it can be a named external function we can refer to that external name function with the function name without the parenthesis so this was add event listener method now we will learn the remove event listener method the remove event listener removes an event listener that was added using add event listener so here we have added the event listener using add event listener method now we can remove it using BTN Dot remove event listener again we have to pass this same arguments just copy and paste it here so this remove event listener will remove the event listener that was added using this add event listener you can see here I have added the external named function if I add one Anonymous function here then we cannot remove that event listener using this method so we have to use the external named function when we want to add the event listener and remove the event listener now let's know about some of the useful JavaScript events so the first one is mouse move event Mouse move event fires repeatedly when you move the mouse cursor around the element and second one is mouse down event when you press the mouse button on the element this event will fire next one is mouse up when you release the mouse button on the element then this event will fire next event is mouse over event when the mouse cursor move from outside to inside the boundaries of the element then Mouse over event occurs next one is mouse out when the mouse cursor is over an element then moves to another element then Mouse out event occurs next one is key down event key down event files when you press the key on the keyboard and it files repeatedly while you are holding down the key next one is key up event this key up event files when you release a key on keyboard next one is key press so the key Place event occurs when you press a character keyboard like ABC it fires repeatedly while you hold down the key on the keyboard next one is scroll so a scroll event occurs when you scroll a document or an element the scroll event files we will see more examples of events when we will create the JavaScript projects now we have completed the basic of JavaScript next we will learn the advanced JavaScript and create some JavaScript projects I hope this JavaScript course will be helpful for you if you have any question you can ask me in the comment section please like and share this tutorial and also subscribe my channel great stack to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 92,134

Keywords: dom manipulation in javascript, dom in javascript, javascript dom, javascript dom manipulation, dom javascript, javascript dom tutorial, document object model, document object model javascript, javascript document object model, javascript tutorial for beginners, javascript, javascript full course, javascript tutorial, GreatStack

Id: WjxQRfZfZnw

Length: 93min 47sec (5627 seconds)

Published: Mon Sep 18 2023