JavaScript DOM Manipulation - Full Course for Beginners

Learn about JavaScript DOM manipulation in this beginner's tutorial. This is when you use JavaScript to add, remove, and modify elements of a website.
In the first part of the course, you will learn about the basic features of a website DOM and the JavaScript commands you can use to manipulate the DOM. In the second part of the course, you will use what you have learned to create practical examples ranging from beginner to advanced.
✏️ CodeLab created this course. Check out their channel: / codelab98
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:32) What is the DOM?
⌨️ (0:02:05) DOM Tree Analogy
⌨️ (0:04:01) Selecting Elements in the DOM
⌨️ (0:11:44) Styling an Element
⌨️ (0:16:33) Creating Elements
⌨️ (0:17:32) Adding Elements
⌨️ (0:18:33) Modify Text
⌨️ (0:21:15) Modifying Elements Attributes & Classes
⌨️ (0:24:59) Remove an Element
⌨️ (0:25:47) DOM Tree Recap
⌨️ (0:27:58) Traversing the DOM
⌨️ (0:37:48) Event Listeners
⌨️ (0:44:59) Event Listener Example
⌨️ (0:50:16) Event Propagation
⌨️ (1:00:07) Event Delegation
⌨️ (1:11:13) Introduction to Projects
⌨️ (1:11:52) Project 1: Beginner
⌨️ (1:14:26) Project 1 Mark-Up
⌨️ (1:16:31) General Styles for All Projects
⌨️ (1:17:08) Project 1 CSS Styling
⌨️ (1:24:40) Project 1 JavaScript
⌨️ (1:29:39) Project 2: Beginner +
⌨️ (1:30:41) Project 2 Mark Up
⌨️ (1:32:33) Project 2 CSS styling
⌨️ (1:41:30) Project 2 JavaScript
⌨️ (1:46:08) Project 2 CSS Styling p2
⌨️ (1:47:53) Project 3: Intermediate
⌨️ (1:48:39) Project 3 Mark Up
⌨️ (1:49:59) Project 3 CSS Styling
⌨️ (1:55:19) Project 3 JavaScript
⌨️ (1:58:02) Project 3 CSS Styling p2
⌨️ (2:00:45) Project 4: Pro
⌨️ (2:01:26) Project 4 Mark Up
⌨️ (2:02:44) Project 4 CSS Styling
⌨️ (2:06:36) Project 4 JavaScript
⌨️ (2:20:37) Project 5: Master
⌨️ (2:22:01) Project 5 Mark Up
⌨️ (2:23:15) Project 5 CSS Styling
⌨️ (2:26:39) Project 5 JavaScript
⌨️ (2:33:52) Project 5 CSS Styling p2
⌨️ (2:38:41) Project 5 JavaScript p2
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@CodeLab98]

Thanks for watching everyone! I hope you enjoy the course and learn a lot from it!😎

[@Joe-gy4jj]

This is what I was looking for and i was stuck,Thank you so much,I also subscribed your Channel.It's awesome.

[@bappi5702]

Thanks for your hard work ❤️

[@rasthiag0]

Very good tho. I like the way you made it straight to the point!

[@anxietyismymiddlename4073]

Thank you!!!

[@fred273]

Thank you!

[@tati_edits11]

This is literally the perfect tutorial for beginners, he literally just explained it to us like we're 5 year olds. I love it.

[@Balkan55]

This is everything you can possibly do in Dom that you will encounter in real life.

[@akashpandey1215]

Fucking not catching the accent 😭

[@Terms-and-Conditions]

I wish he would explain like if we were 4 because i can't send this to my nephew now :(

[@manishkarki8119]

​@@akashpandey1215same problem

[@oliveryt7168]

​​@@Terms-and-ConditionsMaybe He identifies as a 5yo?

[@miguelalejandrobritorausse5023]

This is just great. As a venezuelan who lives in a difficult country, i want to say thank you to all of you guys for making this tutorial and for helping us to grow as a developers. Cheers my friend

[@randallwalkerdiaz1002]

Imaginate que fuerza tiene el marxismo que ni se puede hablar de la palabra del communismo o socialismo sin tener miedo de la pandilla. Te deseo prosperidad y que la gente no te quite cuando vos avanzas.

[@aammssaamm]

It cannot be more difficult than Soviet Union before the internet era, but those guys are still among the strongest programmers of the world.

[@khoroshoigra8388]

just keep it up, don't look back just look forward for the new life awaits you bro!

[@miguelalejandrobritorausse5023]

@@aammssaamm Yes, they are. Cheers

[@miguelalejandrobritorausse5023]

@@khoroshoigra8388 Thank you My friend.

[@surajpatel3778]

I love the fact that you took your time to explain everything into details

[@norahyde5733]

This is the bridge I needed from learning the algorithms and loops to actually being useful for making pages

[@alanlane5961]

This video is fantastic, I spent so much time trying to figure out the DOM and what it does. This video course is very complete, covers a lot of material and I am happy to say that I actually understand the narrator in the video. Great job and Thank you for a great video course!!

[@tdematos]

One of the best tutorials I have encountered that teaches you how to manipulate the DOM. This is a must-watch video! Thank you for this incredibly informational and detailed video!

[@bipuljha792]

Thanks for this video. Though theory is something I find boring so I started with the Project part directly, I really appreciate the hard work you put for this. One small add-up, in Project 4 ending when we click the reset button, the pause button was still there but it should turn to play. So, all we need inside the reset event listener, we'll change the timerStatus to stopped and change the icon for StartStopBtn to play like we did in else statement.

[@jasmeetkaur7330]

Watched multiple videos on youtube, but this is the most detailed and clearly explained. Thank you!

[@pioneer7161]

Great course! I enjoyed it like a movie. Can come back to this tutorial anytime whenever I would need this to implement in the project. Thank you!

[@future_teknokrat7585]

This might be one of the top 10 courses ever offered by free code camp. This was needed so many years ago

[@MrPanzerDragoon]

This....times 100. Seriously, not a lot of courses cover the DOM first. I have been struggling with JavaScript for sometime now, but with this video, it became so much clearer!

[@juanmonster6232]

@@MrPanzerDragoon I agree....there is also an article by "Chibuike Okere" on "Free Code Camp" that basically covers this video but in writing...it is really good.

[@paschalynukwuani6930]

You are such a great teacher. Keep up the great work you do! This content was very helpful .

[@kevinjordan7583]

I paid for a udemy “beginner” course and the guy steamrolls through not explaining what he is doing and was too hard for me to follow. This course is perfect and the tutor explains everything as he goes through it and I understood it perfectly. Top notch thanks

[@ladylai06]

i enrolled into springboard which is the same instructor and i have the same issue. just watched this and learned more than what I have so far in the springboard course that i paid for....

[@otakusong66]

IT WORKED, THANKS I'VE BEEN LOOKING FOR THIS FOREVER, BUT NO TUTORIAL COULD EXPLAIN IT AS YOU DID

[@aadarshbaral4585]

Can't believe this was uploaded when I was in need of a good DOM course. Sometimes it really feels like some mysterious force knows everything you are thinking of😂

[@mevn6807]

Saaame

[@poornesh.s7104]

same

[@FarhanAli-to3ku]

i never explained how helpful and amazing tutorial on DOM this is and awesome channel this is..simply a best channel to learn courses for begginers as well as experts also. i will also recommend this to my class-fellows also to learn from this channel. keep giving a useful knowledge about technologies that others can't do. thanks sir good expalnation skills you have. i give a segguestion plzz explain your concepts before implementaion practically.

[@nomwesigwaisaac7104]

This is what I was looking for,thanks for the great job you're doing ⚛️🤝

[@vt1tov]

Thank you so much for all the content. I love this channel and admire all the knowledge you share with people.

[@universecode1101]

Learn the basics and this is one of the most important concepts

[@okibeogomola5921]

This is a great course, well paced, good structure, great flow of concepts, just wow!, great work and thank you. Just had to check your channel to smash the subscribe button.

[@beastzx18]

No offtopic things, just the things we wanted know, appreciate your content

[@abebrosiczki637]

Thank you so much! Learned so much I did. This is gonna very important knowledge onwards.

[@nojoodothmanal-ghamdi1026]

This is just brilliant! I understood everything clearly and I liked that you also explain the concept not just only the code and how it works. Thank you so much

[@bahatiyves]

The whole course was just amazing 😊 this was so helpful thanks to the codelab !

[@peterkabiru5144]

Thanks, learning a lot. More fun way of interacting with JavaScript after boring time on JS basics

[@harrisjm62]

came here as a break from JS basics. Motivated to code, just not motivated to do highly abstract coding. I was both surprised and sad to learn that DOM manipulation isn't part of any of the certified courses.

[@lycht.]

great video. There is a bug in the last project; if you click the button and not the icon inside the button all the todo list will be deleted. To solve this add the following code: deleteButton.addEventListener('click', function(e){ let target = e.target; if(target.tagName === 'I'){ target.parentElement.parentElement.remove(); }else{ target.parentElement.remove(); } In this way you know if the click is done on the button or on the font-awesome icon

[@Dungeoner918273]

This should be pinned

[@mayank4156]

This is awesome! Even made written notes for practice and so that the learning sticks. That's the best way to learn. ❤

[@madhousenetwork7765]

Very detailed and structured course

[@azureharris8647]

Dude your a life saver. I’m self teaching myself web development and I been stuck on this for 2 weeks until today. Thank you !!!!

[@hanzalamehtab]

ai gonna replace us find a different niche

[@azureharris8647]

@@hanzalamehtab I’ve read that’s not happening anytime soon

[@azureharris8647]

@@ksneeraj399 exactly. AI just isn’t smart enough for these kind of things

[@user-ge9gg4cp8d]

@@azureharris8647 Why won't one person write all codes to AI and the sell them this programm for big money?

[@omomaighawosa570]

Thanks you so much for this man. I learnt alot especially from the projects🙌 And I do like your styling too 😁

[@howawwe3291]

Very informative and helpful tutorial. However it got harder to follow along once I got to the event listeners part. I noticed that most of the styling code for the HTML and CSS files weren't revealed. Any reason for this?

[@yashsharma5013]

I was looking exactly for this, was getting into javascript and this video did helped a lot, the best thing was the css styling, so I kinda revised there too as I am just starting my web dev journey. Thanks a lot !

[@funnyanimalworld7579]

I think you can use defer atribute of script tag and move it to the top for easier readability .this atribute makes so that script tad is read after the document which is important cause you dont want to manipulate non existing tags.

[@user-ge9gg4cp8d]

You give me awesome practise, without you, I wouldn't step out of the comfort zone!!

[@FarhanAli-km5id]

Very amazing courses this channel providing and uploading..super... amazing...some practical projects in the courses can also make amazing efforts for this channel fame and papularity...

[@janmutewera]

finally a course which covers the fundamentals of dom manipulation and event handling

[@umbertogarciacabrera9534]

The DOM World is more than a few videos tutorial, therefore this topics deserve one of thouse extralarge one. Thanks ones again.

[@Giddywiddy]

Great video! I would like to ask what is the advantages of doing the traversals vs manipulating the element directly? For example in project #5, couldn't you just do li.style.textDocoration vs checkButton.parentElement.style.textDecoration as let is block scope

[@onio907]

Great video, made my understand alot of the things i was missing.

[@sebastianlozano7707]

flabbergasting tutorial about the DOM! put it into practive with a couple of differents projects and you won't ever forget it!

[@ichiroutakashima4503]

Thanks a lot for this. I managed to get a good grasp and deeper insight compared to a crash course.

[@mathis-meth4229]

quincy larson has a vision of democratizing developer skills and he certainly is in war mode. Great content! ❤

[@alexchinchay7600]

Very great tutorial, learning a lot 🙏🏻

[@CYBERLUST]

Sir thanks, at least I got a good idea of what DOM is and now what is needed is a lot of practice to get a hold on it

[@siddharthpandey8516]

This is perfect! Going to go through this whole thing. I think we can appreciate stuff like react so much more once we know this

[@ShrishDollin]

Any perfect resource for React you reffered after this video & found extremely useful? Please do put it here!

[@hai-yb3nc]

@@ShrishDollin yeah pls share your own learning path. i also want to learn react after that tutorial

[@filippodborschi1404]

Great tutorial, very useful for a beginner! Thank you!

[@Jay0179]

This goes straight into my playlist.. 👍

[@AJGagliardo]

Thanks! I was so lost on DOM manipulation as a self learner I really appreciate this video. Also it makes it funny that the captions sometimes changes DOM to 'dumb' which made me laugh 'if you want to know more about dumb events go to...' amazing tutorial (havent finished it yet but I've learned so much in the first hour.

[@jmid6358]

it's really interesting and informative. it helped me a lot but it would have been better if you had shown the CSS code so we could replicate the style changes as we were testing the queries.

[@KimCarlos12]

He has a point

[@TheFearedTurtle]

If you can´t replicate it I suggest you learn CSS, you'll need to learn it, besides its something that should be learned before jumping in JS.

[@yungarepa]

@@TheFearedTurtle mostly ppl already know CSS and yeah always is good to practice but most of us just want to practice JS and DOM

[@amanmaddhesia120]

Truly speaking: this is an awesome tutorial sir, too good, loved it❤

[@tenc6491]

Thank you for this awesome tutorial. With due respect, I beg to say that, it would have been much better if you would have also shown your CSS codes in the tutorial.

[@BiggestOfBoxes]

thanks alot! hopefully this can help me in my course of learning to code!

[@benedictambrose7681]

Clear and coherent explanation. Thanks for sharing

[@venkat.sairam]

Your timing is so good

[@ambole]

Thank you Freecodecamp what you are doing here is both wonderful and really eye opening. Thank you codelab finally i feel like i am grasping javascript.Thank you

[@ossigen8_Shorts-Video]

learned html,css and taked a look at the js basic, then stopped and learned c++ for school... came back to js an watched this video, learned a lot dude

[@carterpaul2688]

This guy is the best teacher on the net

[@snex-techprogrammer5110]

Great course, worth spending your time on it. Kudos

[@KeyserSoze-sb8vx]

If you have multiple elements or how do you specify which exactly? Would you include the class=“” in the name? What is the distinguishing factor?

[@stevenoketch6950]

I love it when freecodecamp post JavaScripts content

[@mdadnanshiragee184]

Absolutely spot on!

[@Tomarika]

thank you for the video! Your explanation is simple and clear, I enjoyed following you in part two, helps a lot with memorizing things!

[@brookrichardson1373]

This was excellent. Thank you

[@compScientizt]

thank you so much for this excellent course, you guys are awesome. love you!

[@cnyramcuriosity4793]

Thanks for this course!

[@samadsiddiqui5925]

One of the amazing DOM Manipulation Lectures and projects I got here :)

[@quadriomotayo-cw4hr]

This is Amazing thanks for the video. For the last project, I added a condition that unchecks the input value should in case one mistakenly checks it

[@jasenlakic5033]

Great tutorial, really well explained. Thank you! Did something change in the meantime with code? The last part is not working for me in project 2. Click anywhere to close the window.

[@layla_xit52]

Woah, great video mate!

[@ldpenrose]

Perfect Timing!

[@80Vikram]

Thanks a ton for this super awesome video ,god bless you team

[@sastyfanko5188]

What a superb evaluation of the Chris Palmer video. Please publish your follow-up results on Money Robot as well as if the backlinks are ever appearing in the Google Index. What indexer do you use for trying to obtain backlinks indexed?

[@tgk217]

i love this, came here from google discover tab on my pixel phone! Solid knowledge from the beginning to higher levels of event listener use

[@ritik7906]

one of the best beginner friendly course to learn DOM manipulation 😀

[@codewithmoiz]

Masterclass of a cours! Kudos🙌

[@CodeDynamo]

Very Awesome Course.. Learned a lot of things

[@kastusakula]

awesome tutorial, thank you!

[@fessyhuncho]

Thank you for the projects on DOM manipulation.

[@jayribagchi2182]

such an awesomeeee tutorial!!! thankyou thankyou loads and tons for this

[@mevn6807]

Thanks a lot, that's what I need now 😊

[@shivampal3669]

Hello Free Code Camp . This tutorial helped me a lot regarding DOM Manipulation . and yes i enjoyed this course . the 4th project was difficult for me to understand. i thought there is some predefined javascript function for creating stopwatch and we just have to show it into front-end part using dom. THANK YOU ........

[@muhamadhafidh1303]

i waiting for this courses, thx

[@deogenesabejuela7016]

After finishing your tutorial. I became confident in pure javascript coding. Amazing tutorial. God bless You!🙏🙏🙏

[@ridhirajput7779]

const ul=document.querySelector('ul'); const li=document.createElement('li'); ul.append(li); li.innerText='X-Men'; li.setAttribute('id', 'main-heading'); Can you tell, why setAttribute not working for me

[@denispanarin]

Thanks a lot. Is there any difference? 01:45:55 window.addEventListener('click', (e) => { console.log('e') if (e.target === modalCont){ modalCont.style.display = "none" } }) VS modalCont.addEventListener('click', () => { modalCont.style.display = "none" })

[@NonTwinBrothers]

Another awesome video, Derek Muller 😎 🤙

[@cresthia]

Been looking everywhere for a course like this. will reply to this comment with my thoughts and how much this helped me when im finished with this course :)

[@doeyehof]

I'm Learning so much, you're great people.

[@dinaravaleeva7588]

Thank you for a great tutorial. It is very important not just to watch but to code even if you just copy it down. I have been looking at the code in the accordion project for about 30 min, cause nothing worked. And the devil was in the details...my script link in HTM was at the top, then I put it down before and it works!

[@shawnconboygaming]

in the css, there are "transitions". I use tab w/ Emmet abbreviations. and accidentally had one of those as "transform" instead. that was the most frustrating 30 minutes of my life trying to find out what wasn't working. I dropped all the code into chatGPT and had it check for errors and it didn't find that. Sneaky.

[@Mojo_._Jojo]

Haha ... i too had the same problem and was getting anxious about where the heck is the problem , but yaa after putting script inside body everything was fine . And i learnt that adding script tag inside the body is the best way to run Js as it makes sure that the whole elements are loaded before running js an doesn't give errors during execution .

[@cmdaltctr]

where did u get the source code?

[@nishantdev]

the course was well structured, learnt quiet al lot

[@ulvinasibli]

Hey, great one. Any references to the CSS codes?

[@shahfaisal3923]

Love this tutorial. Thanks for sharing. Love from Afghanistan.

[@mohammedharoon1167]

I love this very much thanks to put this course at correct time lots of love to you♥️♥️♥️♥️♥️

[@dries59dep]

Is the HTML and css code not availible from the course which you used ? Thx

[@uyenthanh2045]

cam on chi vi vi deo huu ich va thiet thuc, da giup em them duoc bai hoc moi chuc chi chuc khoe thanh cong

[@2ru2pacFan]

Thank you for this! Learnt a lot!

[@abdulx01]

I learning DOB based-XSS Good content. I love to break code. 👊

[@tommy2naans]

Very decent video, @CodeLab smashed it. Thank you @50.29 you put Event probagation, should be propagation

[@cmdaltctr]

Thank you so much for this. Does this course comes with course material we can download?

[@grbsql]

Excelente el video. Muchas gracias

[@TrippSaaS]

I wish MDN had video explanations of stuff like this in the docs.