Learn DOM Manipulation In 18 Minutes

🚨 IMPORTANT:
JavaScript Simplified Course: javascriptsimplified.com
DOM manipulation is tough. There are lots of methods and techniques you need to master and it is not obvious which methods are best for each scenario. In this video I cover the 14 most important DOM manipulation methods that you need to know.
📚 Materials/References:
DOM Traversal Methods Video: • Learn JavaScript DOM T...
innerHTML Cross Site Scripting Video: • How To Prevent The Mos...
Data Attributes Blog Article: blog.webdevsimplified.com/202...
classList Blog Article: blog.webdevsimplified.com/202...
🧠 Concepts Covered:
- Creating elements
- Adding elements
- Modifying data attributes
- Removing elements
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:01 - Adding Elements
02:58 - Creating Elements
04:04 - Modifying Element Text
07:30 - Modifying Element HTML
10:22 - Removing Elements
11:54 - Modifying Element Attributes
14:11 - Modifying Data Attributes
16:13 - Modifying Element Classes
17:40 - Modifying Element Style
#DOMManipulation #WDS #JavaScript

Пікірлер: 537

  • @pixelfixer_
    @pixelfixer_3 жыл бұрын

    I know it's not a big thing or anything, but thank you for timestamping your videos. It's so incredibly useful, and not enough content creators take the time to do that

  • @WebDevSimplified

    @WebDevSimplified

    3 жыл бұрын

    I'm glad you appreciate it. I have been trying to do it on all my new videos.

  • @oscarleon3008

    @oscarleon3008

    3 жыл бұрын

    @@WebDevSimplified Thank you for doing it, I always love it when someone in the comments does it for the longer videos. But it's even really cool that you take the time to do that yourself. Thanks for all the videos! I'm learning a ton from your channel.

  • @009a2

    @009a2

    3 жыл бұрын

    Totally agree. I would add to that, that the times times may not be useful the first time you watch the video, but they are super useful on the second watch when you try to reference something :-)

  • @randominternetidot9263

    @randominternetidot9263

    3 жыл бұрын

    Yeah some times I’m watching some programming video and I’m looking for some part of the video, but then I realize they didn’t take the time to put time stamps and I have to spend i while just looking for that part.

  • @randy918

    @randy918

    2 жыл бұрын

    Thanks for all the timestamping. I rely on it, never ignore it.

  • @freshpootube
    @freshpootube3 жыл бұрын

    I love how organised this guy is. Prepares chapters in his videos, provides links. So valuable.

  • @nischalbista6436

    @nischalbista6436

    2 жыл бұрын

    @homo sexual feminine male whistleblower confesion how do you know ?

  • @carguy-xv2cl

    @carguy-xv2cl

    2 жыл бұрын

    Even prepares his hair with gel.

  • @chadgregory9037

    @chadgregory9037

    Жыл бұрын

    It's like if Zach Morrison was actually a responsible smart person

  • @Winter_Wyvern1

    @Winter_Wyvern1

    Жыл бұрын

    @homo sexual feminine mal6 whistleblower confession what are u on

  • @thequantum-plator

    @thequantum-plator

    10 ай бұрын

    @homosexual feminine biological male sexual slut 3 s t f u bot

  • @TruthSeekerClub
    @TruthSeekerClub3 жыл бұрын

    You know why I choose you always to review topics or see your tutorial before I learn new technology? 1. Very simple. 2. Clear. 3. Very direct. 4. Detailed. 6. Cover a lot. 7. You cover important things. 8. Organized. 9. I can have excellent understanding what is this technology all about. In general.

  • @caneroncel
    @caneroncel2 жыл бұрын

    As a 37 years old front-end developer I want to say that you are making a great job. You are very calm, your tone is cool and looks like you are know what are you doing :) World is a better place because of people like you. Keep going and share your knowledge bro.

  • @aymenob2484

    @aymenob2484

    Жыл бұрын

    Indeed i like the quality of his videos very helpful

  • @RedBeardRetroTech
    @RedBeardRetroTech3 жыл бұрын

    I've been watching these videos to study, they're very straightforward and make so much more sense compared to my professors. I appreciate you making these videos

  • @seanflood3987
    @seanflood39872 жыл бұрын

    Props for being so well spoken and organized. You do a really good job at taking a concept and explaining it in a user friendly way. A lot of courses these days don't explain the "why" enough when teaching. Good job dude great content!

  • @Nobody10150
    @Nobody101503 жыл бұрын

    your calm voice while explaining is making the info float easily in my brain.. a lot of thanks!

  • @patricklemmer9902
    @patricklemmer99022 жыл бұрын

    Just worked through this and another video about DOM traversal. I am extremely confident working with the DOM now, which wasn't the case 48hrs ago. Thank you so much for your clear instructions and on point explanations! Incredible value!

  • @TheCodingOdyssey
    @TheCodingOdyssey3 жыл бұрын

    You can hear semi-colon singing ' Wish I was here' in the background' :D

  • @nabilhaouam8497

    @nabilhaouam8497

    3 жыл бұрын

    😅😅😂, he’s a legend though

  • @TheCodingOdyssey

    @TheCodingOdyssey

    3 жыл бұрын

    @@nabilhaouam8497 ha ha thats why there are songs singing in the background

  • @johnyepthomi892

    @johnyepthomi892

    3 жыл бұрын

    i get ocd. I make sure to use it since working with different launguages it makes it easier.

  • @fazlerabbi3093

    @fazlerabbi3093

    3 жыл бұрын

    And the JS shouting "I am too smart to live without you".

  • @hikari1690

    @hikari1690

    3 жыл бұрын

    I hear ;_; saying “I’m not needed anymore”

  • @user-kn4oi9oh4i
    @user-kn4oi9oh4iАй бұрын

    OMG this guy helped me alot especially with difficult topics of CSS and Javascript! He explains everything so well! He's basically my mentor without him knowing it.

  • @Misfittykitty
    @Misfittykitty2 жыл бұрын

    Thank you for your time and effort making this video. I have been banging my head against a wall for HOURS trying to understand this, and you have made it crystal clear. I will pay it forward one day--and wish you all the best. Thanks again for your kindness in teaching this (and so well!!) :) :)

  • @chikkiidehalvi5561
    @chikkiidehalvi55613 жыл бұрын

    your videos are very to-the-point and worth the time, exactly what a programmer needs.

  • @user-ke4yx6uw1r
    @user-ke4yx6uw1r3 жыл бұрын

    I just started learning DOM manipulation and here you are with the right video at the right time, Thank you much Kyle

  • @cleansermacaroni9892
    @cleansermacaroni98922 жыл бұрын

    I have done a couple of frontend courses, and I didn't have any trouble with the content, but this is the first video that has made perfect sense of it all. Wow. Really nice. Thanks!

  • @tiltify2393
    @tiltify23932 жыл бұрын

    You are absolutely awesome for actually organizing your content in an actually efficient way, that's not all over the place, like every other JS tutor on the internet out there

  • @jaylayoung2576
    @jaylayoung25764 ай бұрын

    Man, you're a lifesaver. I appreciate the work you put in on making these videos so straightforward, yet thorough.

  • @zakariakachani9143
    @zakariakachani91433 жыл бұрын

    Love this man he explain so well and act like a robot. LOVE IT !!

  • @hamzahahmad1670
    @hamzahahmad16703 жыл бұрын

    Really great work . There aren't many proper DOM manipulation crash courses on youtube, so your efforts are very much appreciated. I know this is a very common thing to say on videos like these, but I actually opened youtube right now to search for a DOM manipulation crash course, so seeing this was a welcome surprise.

  • @mohamedyashar9940
    @mohamedyashar99402 жыл бұрын

    As a beginner I found it very crystal clear to build my foundation in DOM MANIPULATION. I'm glad that I found this video @ryt time. You have did a fantastic job!! Thank you.

  • @Soap_js
    @Soap_js3 жыл бұрын

    00:00​ - Introduction 01:01​ - Adding Elements 02:58​ - Creating Elements 04:04​ - Modifying Element Text 07:30​ - Modifying Element HTML 10:22​ - Removing Elements 11:54​ - Modifying Element Attributes 14:11​ - Modifying Data Attributes 16:13​ - Modifying Element Classes 17:40​ - Modifying Element Style

  • @ayushpreenza3071

    @ayushpreenza3071

    2 жыл бұрын

    thanks friend

  • @joestard.altair9454

    @joestard.altair9454

    2 жыл бұрын

    Ty

  • @ooomoo9071

    @ooomoo9071

    2 жыл бұрын

    thks

  • @Pishkoo

    @Pishkoo

    2 жыл бұрын

    God bless you ma friend💖

  • @busyrand

    @busyrand

    2 жыл бұрын

    Thank you!!! This is fantastic and helpful...

  • @imbrad99
    @imbrad992 жыл бұрын

    This video is incredibly helpful, thank you for all that you give to the community. You're brilliant and have taught me so much!

  • @terenceroberts5240
    @terenceroberts52403 жыл бұрын

    Yes, going to start donating to this guy. He is an asset.

  • @maxlong1374
    @maxlong13743 жыл бұрын

    Hello Kyle. This is the first video I watched in your channel. After watching this video, I have decided to watch ALL of your videos in your channel ASAP. I love the way you teach things. I love your mission. I'm going to like every video I've watched in your channel from now on. Thank you Amazing human.

  • @leightonbuchanan-cates3932
    @leightonbuchanan-cates3932 Жыл бұрын

    This was insanely helpful, especially your explanation about the difference between innerText and textContent. Thank you so much and keep up the amazing work!

  • @cineverseproductions
    @cineverseproductions2 жыл бұрын

    Bro.. you have a very strong and deep understanding of these basic web development things. Everything is counted and thank you so much for helping us with such things through your videos. One of the best KZreadrs. 👍

  • @michaelrooze278
    @michaelrooze2783 жыл бұрын

    It would be cool to see examples of how you have used these in your own code....How often are you working with vanilla JS vs a framework?

  • @techbizcanada7594
    @techbizcanada75943 жыл бұрын

    Thank you. You're a good teacher. Your presentation style is clear and concise. I like that very much.

  • @DigitallyAlex
    @DigitallyAlex4 ай бұрын

    You are a literal life saver Kyle, managed to help me understand how this works in such little time. Thank you!

  • @Snoo29293
    @Snoo292933 жыл бұрын

    I now got to learn about classList and dataset, I was afraid about the blog, because I had got so used to videos, but I gave a look to your article and it seemed pretty well made and short.

  • @hg-yg4xh
    @hg-yg4xh Жыл бұрын

    He has a gift for teaching, he answered all my unanswered questions all throughout the video that I didn't know how to articulate.

  • @mayankarote4750
    @mayankarote47503 жыл бұрын

    Thank you for teaching this tough thing in a very simple way

  • @alyciariley3303
    @alyciariley33032 жыл бұрын

    This is great! All of my experience has been with jQuery and I am currently refactoring my Bootcamp projects to VanillaJS for practice. You explained everything so clearly. Thank you!

  • @BuzzMarketingKe
    @BuzzMarketingKe Жыл бұрын

    Thanks a lot for making the world an easier place. much appreciation from Kenya.

  • @goisborges
    @goisborges2 жыл бұрын

    As soon as I get some availability I'll purchase your course. Don't stop sharing content, bro. Your explanations are great.

  • @logusgraphics
    @logusgraphics3 жыл бұрын

    Your channel is amazing. The content is not only educational but very entertaining.

  • @vergilkelley2378
    @vergilkelley23783 жыл бұрын

    you deserve 2 thumbs up. love your content, you make it easy to understand!

  • @obasaajibola3933
    @obasaajibola3933 Жыл бұрын

    Thank you for your teaching. It has truly helped me in solving a lot of problems I thought I could not solve.

  • @fabiomazzei9871
    @fabiomazzei98712 жыл бұрын

    Excellent class! Thanks for sharing your knowledge. I learned a lot, sincerely. A thousand 'likes' for you!!!

  • @yashmodi2432
    @yashmodi243211 ай бұрын

    Thank you so much..Your content is very much precise and to the point and better than 2 hrs of video that other creators are making to explain this simple thing

  • @jimhalpert9803
    @jimhalpert98033 жыл бұрын

    Glad you talked about the security flaws of element.innerHTML. More people need to know how dangerous it can be if you let user put custom raw html into the page.

  • @tolgaacar1296
    @tolgaacar12963 жыл бұрын

    I recommend you to import your js files after the tags in html files. Because The script can begin executing before the DOM is fully loaded. Then null property errors will occur.

  • @moniemonie96

    @moniemonie96

    2 жыл бұрын

    Orrr have it all run once html is executed.

  • @TamNguyen-ij4wp

    @TamNguyen-ij4wp

    2 жыл бұрын

    He has a video about the executing script file with defer and async.

  • @josevicentediazmora4064

    @josevicentediazmora4064

    2 жыл бұрын

    Thankss (L)

  • @adsrinivasan
    @adsrinivasan2 жыл бұрын

    By far your teaching is good compared to other tutors. Thanks a ton

  • @azaramirli2601
    @azaramirli26019 ай бұрын

    thank you for the time you are putting in. I hope you are getting something back out of it. You are dropping golden information generously. Can you please make a video in the future about most of your favorite shortcuts you use while coding.🙏

  • @younessbouhjar9576
    @younessbouhjar95763 жыл бұрын

    A quick tip: in case you want to delete multiple elements in a div for example. document.getElementsByClassName('class-name') delivers a nodeList.that means you'll get an error if you used the remove() method. instead change style.display for all nodes by looping through the list for example: var div= document.getElementsByClassName('class-name'); for (var i=0;i

  • @xXYourShadowDaniXx

    @xXYourShadowDaniXx

    2 жыл бұрын

    Or you can do it the correct way for deleting and loop through the NodeList and run remove() per element? let div=document.getElementsByClassName("test"); Array.from(div).forEach((elem)=>{ elem.remove(); });

  • @sanjitselvan5348
    @sanjitselvan5348 Жыл бұрын

    Here's someone who's teaching people stuff that REALLY matters in the frontend world. Thanks a ton Kyle!

  • @yasirtahirkheli74
    @yasirtahirkheli742 жыл бұрын

    Am scratching and pulling my hair at the moment for being idiot to have been missing this truly helpful and life-saving channel. This is exactly what i have been struggling for as I plan to replace all the jquery code from my projects with plain javascript. You are a gem mate! watched and subscribed.

  • @joeleone6276
    @joeleone62762 жыл бұрын

    This material is presented very easily and understandable for many different skill levels.

  • @Supernova12034
    @Supernova12034 Жыл бұрын

    Great video! really helped nail down the DOM concepts for me.

  • @SK-vg3mw
    @SK-vg3mw11 ай бұрын

    Thank you, your channel is a goldmine for beginners!

  • @ThePaddingtonsChannel
    @ThePaddingtonsChannel8 ай бұрын

    That "dataset" Property seems really convenient. Learned something new 👍

  • @helloredwan
    @helloredwan3 жыл бұрын

    Thank You Brother ❤❤. It's so helpful and learned something new

  • @flux2956
    @flux29562 жыл бұрын

    Your slider carousel tutorial is much clearer now because of this video. I just had to subscribe.

  • @bruhmoment3731
    @bruhmoment37312 жыл бұрын

    Thank you! You're such a great teacher!

  • @philipf2454
    @philipf245411 ай бұрын

    Good introduction to the DOM. Thank you!

  • @Odidi_Bee6ix
    @Odidi_Bee6ix Жыл бұрын

    One of the Best js.DOM tutorials on KZread

  • @kwalsh7107
    @kwalsh7107 Жыл бұрын

    I really appreciate your videos. Explained really well. Thank you!

  • @jesuschuyandres
    @jesuschuyandres3 жыл бұрын

    Awesome stuff Kyle. Thank you so much!

  • @bama2619
    @bama26193 ай бұрын

    brief and fast, thank you.

  • @spondoolie6450
    @spondoolie64502 жыл бұрын

    I've been on my JavaScript journey for about 1.5 months. Once I learned about the DOM everything now seems to make sense, where as before it was literally a guessing game on which methods to use to make things happen. This video is perfect for someone like me that needs a quick-start (sorry, I mean "quickStart") reference where I can have a short video that neatly explains all the methods I'm going to use > 90% of the time. Kyle is the man.

  • @xXYourShadowDaniXx

    @xXYourShadowDaniXx

    2 жыл бұрын

    Yes this video is one of the few that I would suggest to new JS devs, so they can learn actual Vanilla JS properly. Then once you can confidently make sites and tools with Vanilla JS you should try graduating to Vue / React / Angular.

  • @FunnyInternetTrends
    @FunnyInternetTrends Жыл бұрын

    Wow amazing tutorial. Thank you. Last part i get goosebumps. CSS in JS is CSS in CamelCase. Wow this changed my life

  • @samip4sure
    @samip4sure3 жыл бұрын

    I've been doing too much React and NodeJS, I was looking for DOM refresher. Great Stuff !

  • @TheCodingOdyssey

    @TheCodingOdyssey

    3 жыл бұрын

    This is true, when I got into coding I started working directly in React and didn't do that much dom manipulation, only in some small personal projects

  • @TesterAnimal1

    @TesterAnimal1

    3 жыл бұрын

    HTML authors will always need software engineers.

  • @dansf2
    @dansf22 жыл бұрын

    Well done. You present the material nicely.

  • @codeAlongwith
    @codeAlongwith Жыл бұрын

    I have really enjoyed this. Thanks so much.

  • @Peywan
    @Peywan Жыл бұрын

    thaknks, was a good pace to follow along while you were explaining!

  • @manishwalia1102
    @manishwalia11023 жыл бұрын

    Finally I understood this concept thank u so much sir

  • @NewDayMedia.
    @NewDayMedia. Жыл бұрын

    Kyle bro please consider teaching full time . last few months i watched thousands of tutorials i swear you have a better way of making me understand things than anyone else.

  • @514fadeaway8
    @514fadeaway83 жыл бұрын

    THANK YOU KYLE {hope that's the way you spell it} completed my assignment with this one video but their soo much to learn

  • @nwokporochukwuebuka
    @nwokporochukwuebuka Жыл бұрын

    Thank you sir. Your videos have helped me become a better developer

  • @remoralite6027
    @remoralite6027 Жыл бұрын

    Awesome content as always, Kyle! Love the Rise Against shirt :)

  • @thewetfly9207
    @thewetfly9207 Жыл бұрын

    I really like your content, thank you 🙂

  • @dawarlatif3832
    @dawarlatif3832 Жыл бұрын

    your way of teaching is elite, there's a request to make a tutorial series on NesstJs framework

  • @tenzinwoeser6842
    @tenzinwoeser68423 жыл бұрын

    Thank you for brushing me up with Js DOM manipulation

  • @johny962
    @johny9629 ай бұрын

    The toggle method is so cool!

  • @rayankhan12
    @rayankhan122 жыл бұрын

    This is by far the best video on JS DOM manipulation I've ever watched! I would've given it a million likes if I could! :p Thank you soooo much Kyle :)

  • @tasya_nabila
    @tasya_nabila3 жыл бұрын

    It really REALLY help meeeee. I was learning DOM at college but understand nothing at all!! Thank youuu 😢😢😢

  • @gauchodiaz
    @gauchodiaz Жыл бұрын

    Damn this was so helpful to watch. Very well explained and straight to it. Thank you so much dude

  • @madinaabbasi3837
    @madinaabbasi3837 Жыл бұрын

    This was the best explanation thank you a lot. Also the Wow part for me was in 17:54 when it goes to style css elements by JavaScript 😻🍬👋🏻

  • @heritiersefu4539
    @heritiersefu4539 Жыл бұрын

    Bro this is the best DOM video. thanks

  • @ManojSatishkumar
    @ManojSatishkumar3 жыл бұрын

    I'm in the same path as you brother. I teach web development too and have nearly a decade of professional experience

  • @anvarsaidov8964
    @anvarsaidov89642 жыл бұрын

    Thank you, very clear explanation.

  • @gasycube4075
    @gasycube40753 жыл бұрын

    Yeah, I just started learning JS recently! This kind of video just make want to learn mooore! Thanks mate!

  • @TheCodingOdyssey

    @TheCodingOdyssey

    3 жыл бұрын

    Good luck with your journey. Its a rewarding one.

  • @codetech3711
    @codetech37113 жыл бұрын

    Great vídeo Kyle!. It would be better if you can zoom in the code a lot, in my phone the text looks very small. Thanks!

  • @thepopstudio2354
    @thepopstudio23542 жыл бұрын

    You are phreaking awesome! thanks

  • @brianginn1993
    @brianginn19932 жыл бұрын

    Excellent content which I’ve come to expect from you Kyle.

  • @purplealma
    @purplealma3 жыл бұрын

    Thanks for explaining, merry Christmas

  • @awszr
    @awszr3 жыл бұрын

    Very nice!!You covered many chapters of the book i’ve been reading which is (a smarter way to learn JavaScript) in a single video.

  • @missinglink2416
    @missinglink24163 жыл бұрын

    always awesome content.. keep it going!!!!

  • @clami1374
    @clami1374 Жыл бұрын

    Very clear and nice video. Great job!

  • @music6591
    @music65912 жыл бұрын

    Nice video ! Very important part about innerText vs textContent

  • @nevouxjulie6595
    @nevouxjulie6595Ай бұрын

    Thank you so much for this video !!

  • @sankaranarayanan7847
    @sankaranarayanan78473 жыл бұрын

    Was searching for dom related stuff and here it is

  • @elpolodiablo5486

    @elpolodiablo5486

    3 жыл бұрын

    Typical KZread comment

  • @edwingarcia5043

    @edwingarcia5043

    3 жыл бұрын

    Traversy Media has a nice crash course for DOM manupulation, I did learn a lot, of course You need to practice.

  • @edwingarcia5043

    @edwingarcia5043

    3 жыл бұрын

    @@elpolodiablo5486 wdym ?

  • @amongdoomers9464

    @amongdoomers9464

    3 жыл бұрын

    @@elpolodiablo5486 😂😂💯

  • @gautamkanzariya8651
    @gautamkanzariya86513 жыл бұрын

    very good points covered.thanks you sir...

  • @carolinaloaiza2924
    @carolinaloaiza29242 жыл бұрын

    I love your videos, you have a very special way to make you understand, thank u for existing 💙🍀🤘

  • @dnpdnp1213
    @dnpdnp12132 жыл бұрын

    Thank you for this video, it is very helpful.

  • @RafaGomezROG
    @RafaGomezROG3 жыл бұрын

    Hi, Kyle! I really owe you big because I really like to know what I am doing and you surely explain not only how to do things but also why you do whatever you do; but I need to tell you that I hate when you, sometimes, get too rethorical in trying obsesively to make things clear. I give you and hipothetical example: We do this but you can see it because this has no content. Now we write this' content and you can see it because now this has a content that is why you couldn't see it before because it had no content but now you see it because now it has a content. I make this observation not to make you change your ways but hoping it might help as any feedback does.

  • @azsamsiizbrah
    @azsamsiizbrah3 жыл бұрын

    Great video, keep the good work up! About the remove() vs removeChild(), the latter could be more useful when you have already selected the parent and don't want to specifically select the child element on a separate row. Here's what I mean by that with the current example: div.removeChild(div.lastChild); //removes the "Bye"

  • @Victor_Marius

    @Victor_Marius

    2 жыл бұрын

    remove() is not supported in older browsers (I mean Internet Explorer 11) 😂 But sometimes you need to make it work on those dinosaurs

  • @degenyakuza

    @degenyakuza

    Жыл бұрын

    @@Victor_Marius true specially when you’re working on legacy codes

  • @devluxx
    @devluxx Жыл бұрын

    Thanks man, love this.

  • @jorgejosh2731
    @jorgejosh27312 жыл бұрын

    You're really good ! Can you talk about Javascript routing ( spa)?!

  • @michaelanthony4750
    @michaelanthony47502 жыл бұрын

    Concise and thorough

  • @newentu
    @newentu3 ай бұрын

    excelente tutorial men!!