Learn DOM Manipulation In 18 Minutes

there are a million ways to manipulate the dom but you really only need to know 14 different techniques so in this video i'm going to show you every single one of them so you can become a dom manipulation master [Music] welcome back to web dev simplified my name's kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now in this video i'm going to be covering everything you need to know about dom manipulation and to get started i just have a blank html file that links to a script file and then in here i have our script file we can write code in here and it's going to run on this page on the right side of our screen which as i mentioned is a completely blank page so far and if you're interested in taking your javascript skills to the next level make sure to check out my full javascript course linked in the description below it doesn't open for a couple months so if you're interested just go there and sign up with your email let you know when it opens or if you're from the future go there and you can check out the complete course right now so without any further ado i just want to jump into the very first technique of john manipulation that i want to cover which is adding elements to the page super simple there's two different ways that you can add an element to the page the first thing i want to do is select the element we're going to be adding this to which is going to be the body i'm just going to get a variable and set it to the body so we can just say document.body and that's going to be the body which we can append elements to and speaking of the word append that is the method we use to add elements to the body so we can say body dot append and you'll notice we have two choices we have append and we have a pen child these are almost identical methods but they have a few differences first we're going to look at append because one nice thing about append that is different from a pen child is that we can actually append strings so i could just say hello world and when i save this you can see the string hello world prints out on the screen so with append i can append strings but if i used append child and i save you're going to notice the string doesn't show up and if i actually inspect my page and i look at my console you're going to see we actually get an error saying that a pen child requires a node and not a string so that's one difference between a pen and a pen child is that with a pen child you can only append elements like divs or spans or anchor tags while with append you can append all of those as well as also append strings also with a pen something that's really cool is we can append multiple things so if i want to append hello world and i want to append to buy i can just pass them both in you can see that they both kind of pended right next to each other but with append child i cannot do that not only is it because these are strings instead of elements but you can only append one thing at a time you can't just pass a bunch of things to a pen child so this is why generally i like to just use append instead of a pen child since they do the exact same thing but append has a little bit more versatility so you can actually append strings as well as multiple things all at once but what if you wanted to append an element instead of a string because generally let's be honest you're not going to be appending strings to your page you're generally going to be appending elements so how do you make an element well it's actually very easy with creating elements all you do is document dot create element and in here you just pass the type of element you want to create as you can see all the different you know html elements are here so generally you may create a div for example let's create an element that's a div and we'll just say const div is equal to that so we created a div right here but right now if we save nothing's going to happen we inspect our page and we go and look inside of our body there's no div inside of here there's nothing in there and that's because we've created our element but we haven't actually added it to our page this is a crucial step that many people don't realize creating something in javascript is different than adding it to the page all we've done is create a reference to some element but now we need to add that element to our html so to do that we can just say our body dot append div and now we've appended the div to our page obviously we can't see that because the div is just empty but if we open up our body scroll down to the bottom you can see this div is now added to the bottom of our page and if we wanted we could add some text inside of that div and we can actually see the div on our page so in order to add text to our div there's actually two different ways we can do it we can say div dot inner text we could set that to some text like hello world now we save you can see we get the text hello world being printed but this time it's a little different because it's inside of a div also if we come back over here we could use append child instead and you notice that the hello world is still here because the pen child allows you to append elements as well but like i mentioned in the beginning i generally prefer to use append so inner text is one way that we can set our text the next way is by doing text content and set that oops if i spelled content correctly we could set that to hello world 2. if we just comment this out and save we get the exact same result and when we inspect our page we go down to our div they both look exactly the same so what is the difference between inner text and text content they look like they do the exact same thing and in general when you're actually setting text to inner text or text content they're pretty much the same but when you view the text of an element through inner text or text content they actually differ a little bit so what i want to do is i just want to have a div here and inside this div i'm going to have two spans the first one is going to say hello and this second span is going to say buy and if we save that and just comment out all this code for now we can see hello and by being printed to the screen but this one i want to give a style where the display oops display is going to be none so now this by is completely invisible so now if we select that div by just saying document.query select of div and if you're a little bit confused on how all the different selectors in javascript work i have an entire tutorial on it so you can check that out in the cards and description so we just say div is equal to this and now let's say console.log div dot text content and then down here we're going to do the inner text if i save that and inspect our page go over to our console you're going to notice something interesting the text content prints out hello and by and you also notice it prints out all the spacing around these as well as the indentation of all of that while inner text just prints out the text that's visible on our page as you can see here this is the difference between the two text content is going to print you out the exact text content all of the spacing all of the indentation of all of the content inside the div in our case that's this hello as well as this buy but inner text is different in that it looks at the css to see is this actually visible on the screen if so i'm going to give it to you otherwise i'm not also if we just remove this here and resave you'll notice that these show slightly differently because the way text content works is it just copy and paste the text essentially directly from your html but what happens with inner text is it actually displays your text just like it would be displayed inside of your html so as you can see here our text inside the body you know if we go into this div here has all the indentation around it while inside of our html they're just next to each other with a space in between them so when we print out the inner text it just prints it out like the html would while text content is actually printing it out as the html itself represents it with all the extra spacing and showing the invisible elements so that's the main difference between text content and inner text really for the most part this is not going to be a big deal but it's nice to know when you're accessing them whether or not you're going to get invisible or visible information using inner text versus text content so we've talked about appending creating elements and modifying the text inside of them but something else we can do is modify the html inside of an element so let me just remove what we have inside of our body here so we have completely blank body again i'm going to remove this code and i'm going to uncomment this back so we have exactly what we had before we created a div and we set the text to hello world 2. what if we want to actually put html inside of here let's say we wanted this to be bolded so we'll put the strong tag in here and we'll do a strong tag here close that off if we save you notice it just prints out the text exactly as is and it doesn't matter if we use inner text or text content they both work the same if you want to render html inside of a div or inside of any element you need to use what's called inner html now if i save this you'll notice that this becomes bold now and it actually uses these html tags to render out the content now this is really powerful since you can render html directly from your javascript but it is a huge security problem because if you allow users to put user generated content into an inner html they could write malicious code and instead of going super in depth on the security concerns of this i'm going to reference another video i created specifically on this concept it's linked in the description down below and the cards above but just know that inner html is the only way in javascript where you can actually add html from a string into an element like this another thing you could do is you could create a new element we could say const strong equals document dot create whoops dot create element if i can spell correctly there we go call it strong and then we can say strong dot inner text is going to be equal to hello world 2 and then we can just say div dot append strong and now if we save we get the exact same result we had with inner html we just broke it out and wrote the javascript by hand this is a much more secure way to do this if for example this inner text here hello world 2 is provided to you by the customer or by you know user of your website as opposed to being hardcoded but either way you get the same exact results done and it's nice to know that you can use this append on any element it doesn't have to be the body it can be any element on your entire page so now i'm just going to go back to our html i want to bring that code back that we had with this hello span and i'm just going to give this an id of hi i'm going to give this one an id of buy just like that that way we have some html to work with i'm just going to get rid of all the code that we have here so far we're going to say const div is equal to document.queryselector of div i'm going to say span 1 or we'll call it span high is equal to document.queryselector of i and then we had span by these are just our three different elements that we just created and what if you want to actually remove elements from the dom so far we've talked about all the different ways you can add elements and modify the content inside of them what if you want to remove an element let's say we want to remove this by what we could do is we could just say span by and we could call the remove function if we do that you can see it completely removes that element and if we inspect our page it doesn't even appear inside of the html at all it's completely gone so it just deletes it from existence we could come back and later add it we could say div dot append span by and it would add itself back in if we wanted it doesn't you know completely irreversibly delete it we still have access to it but it removes it from the html and we'd have to add it back ourselves if we wanted another way that we can remove elements is by removing them from the parent we could say div dot remove child and if i spelled remove correctly all we need to do is pass in a child for example span high and you can see the removes the span high that is a child of our div generally i just use remove because if i have access to the element why would i want to do remove child it's easier just to say you know span high dot remove this is way easier in my opinion and it does the exact same thing so generally i use remove instead of remove child so that covers a lot of the ways that you can manipulate the html directly removing adding elements and so on but what if you want to actually just get properties of elements or add classes or data attributes and that kind of stuff this is honestly where i do most of my dom manipulation and luckily there's a ton of different tools we can use the first one i want to talk about is how you can modify the actual attributes of an element if we go back over here we can just go to our span let's give it a title of you know hello and all a title does is when you hover over something if i just stop myself from removing it if we hover over it eventually you're going to get a tooltip that says your title so that's one attribute and we also have the id attribute on it already and let's say we want to access these attributes inside of javascript well we could just say span high and we can say git attribute and all we do is pass out the name for example id let's just come in here console.log that out and now if i inspect this page and we go to our console you can see it prints out the id which is hi i could also get the title which is hello and you can see that prints out itself but i don't really use git attribute that much because i could also just say span high dot id it prints out hi i could say span high dot title and it prints out hello so generally if there's an attribute that you would get with git attribute oops get attribute it's generally available already as a method on the element itself but the nice thing about git attribute is it's really explicit what you're doing so sometimes you may not have the attribute available as a method on your actual element so using git attribute is a great way to get around that now the next way you can do is with set attribute so i could say set attribute i want to set the id to the value of i will just say this and now if i just come over to my elements and i go to that element inside the div you can see our id has been changed to that sdf sdf that we typed in also i could change the title so i could say title equals that and now again if i select that element our title has been updated we can use set attribute but again i could always just change the id like this i could say the id is equal to you know sdf sdf i'm just going to take this out of a console log and i save and you can see again i updated the title that way so you can use either one with git attribute and set attribute it really doesn't matter now the last thing which is much more useful in my opinion is remove attribute and just like the others give it your attribute you want to remove in our case title and now if we go to that element you can see it no longer has a title or we could remove the id and now it no longer has an id so remove attribute is a great way to remove attributes from an element really easily super explicit it's really nice now the next thing you can do for manipulating elements is to deal with data attributes which are just like normal attributes but they start with data hyphen and their custom attributes you can add to elements and if you want to learn more about data attributes i have a whole blog on them i'm going to link down in the description below so you can check it out we'll just say data we'll call this test and we'll set it equal to this is a test we can get rid of this title here for now and now what i want to do is get that data attribute and luckily in javascript this is really easy to do there's a property called data set which contains all of your custom data attributes so i just want to log out what data set is so we can see exactly what we're working with if i go over to the console you can see we get this dom string map and it has our test property and it says this is a test so you noticed it took our data test converted it it got rid of the data part and just said test and then it has the value let's come in here and add another one we'll say data longer name just like that and we'll set that equal to just random text doesn't matter now we look in here you see again that data hyphen part has been removed and also the text longer hyphen name has been converted to camel case which is like the javascript way of doing things where it has a capital n and it doesn't have hyphens so now what we could do is we could say i want to get the you know data test property so i say dataset.test and it prints out this is a test what if i want to get the longer name now it prints out that sdfsdf that i typed in so with data sets you can really easily access any property just by typing it out and you can also set properties just as easily so i could set a new property say new name is equal to you know we'll just call this hi and now if i grab that element and i look at it you can see we have data hyphen new hyphen name is equal to high so it converts this camel case version into a hyphenated version and it also adds that data hyphen at the beginning so you know that it's a custom data attribute data sets super useful and i use them literally all the time inside of my javascript code the next thing i want to talk about is classes we can get all the classes of an element let's just come in here and add a class to the span we'll say class is equal to we'll give it two classes we'll say high one and high two these are our two different classes so now what we can do is we can just take that span high we can access a property called class list and this class list has a ton of different methods you can use to modify different classes add remove and so on i actually have an entire blog article on it which i'll link in the description below it goes in a bit more depth but i'm going to cover the most important ones in this video so you have classlist.ad which allows you to add a class we'll say new class save that and now if we look at our class list it has new class inside of it we could also remove a class so let's say i want to remove the high one class i just say remove high one if we look over here it didn't actually remove itself because i spelled high run wrong now if i save again you can see high one has been removed because we used remove and we also have toggle which is really useful we could say toggle hide2 and what that's going to do is it's either going to remove it if it exists already or add it if it doesn't so if it says high 3 you can see it added high 3 because we didn't have that class yet also we can pass a boolean to this whether it's false or true and what it will do is it will automatically remove it if we pass in false or if we pass in true it'll automatically add this class so it's a great way to do adding or removing just based on a boolean and those are probably the most common ways you're going to use classlist now the final thing i want to talk about when it comes to dom manipulation is directly modifying the style property of any element the style property is essentially a way to access any css property let's say we want to set the color here to red now if i save you can see the text has turned red over here if i wanted to access the background color it's going to be slightly different you'll notice that i actually convert the css property which is background hyphen color and i camel case it just like this as if it was data set and now when i save the background color has turned red so if you want to set any css property just do style dot and then that property name converted to camel case and then you set it to whatever value we want for example in this case red if you're interested in taking your javascript skills to the next level make sure to check out my full javascript simplified course linked in the description which is going to teach you everything you need to know about javascript thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 289,519

Rating: 4.9628506 out of 5

Keywords: webdevsimplified, dom manipulation, dom manipulation in javascript crash course, dom manipulation js, dom manipulation javascript, dom js, dom javascript, dom course js, dom course, dom course javascript, dom crash course, dom manipulation crash course, dom methods, dom methods js, dom guide, document object model, document object model js, document object model javascript, document object modal tutorial, dom tutorial, javascript dom tutorial, js dom tutorial, js tutorial

Id: y17RuWkWdn8

Length: 18min 37sec (1117 seconds)

Published: Tue Dec 08 2020