Learn DOM Manipulation In 18 Minutes

  Рет қаралды 1,076,842

Web Dev Simplified

Web Dev Simplified

Күн бұрын

Пікірлер: 544
@pixelfixer_
@pixelfixer_ 4 жыл бұрын
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 4 жыл бұрын
I'm glad you appreciate it. I have been trying to do it on all my new videos.
@oscarleon3008
@oscarleon3008 4 жыл бұрын
@@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 4 жыл бұрын
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 :-)
@RandomInternetIdot
@RandomInternetIdot 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 3 жыл бұрын
Thanks for all the timestamping. I rely on it, never ignore it.
@TruthSeekerClub
@TruthSeekerClub 4 жыл бұрын
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.
@BigSmoke-r9w
@BigSmoke-r9w 10 ай бұрын
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.
@caneroncel
@caneroncel 3 жыл бұрын
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 2 жыл бұрын
Indeed i like the quality of his videos very helpful
@amit-jx5lh
@amit-jx5lh 6 ай бұрын
As a professional, senior Web developer, I can guarantee that this guys has done a great job by making this video. Hats off to you man.❤❤
@乃卂卂-p3c
@乃卂卂-p3c 3 ай бұрын
i have a doubt, can i become a self taught web dev?
@tolgaacar1296
@tolgaacar1296 3 жыл бұрын
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 3 жыл бұрын
Orrr have it all run once html is executed.
@TamNguyen-ij4wp
@TamNguyen-ij4wp 3 жыл бұрын
He has a video about the executing script file with defer and async.
@josevicentediazmora4064
@josevicentediazmora4064 2 жыл бұрын
Thankss (L)
@younessbouhjar9576
@younessbouhjar9576 3 жыл бұрын
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 3 жыл бұрын
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(); });
@terenceroberts5240
@terenceroberts5240 4 жыл бұрын
Yes, going to start donating to this guy. He is an asset.
@RedBeardRetroTech
@RedBeardRetroTech 3 жыл бұрын
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
@NewDayMedia.
@NewDayMedia. 2 жыл бұрын
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.
@Nobody10150
@Nobody10150 3 жыл бұрын
your calm voice while explaining is making the info float easily in my brain.. a lot of thanks!
@patricklemmer9902
@patricklemmer9902 2 жыл бұрын
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!
@Soap_js
@Soap_js 3 жыл бұрын
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
@preenza69
@preenza69 3 жыл бұрын
thanks friend
@joestard.altair9454
@joestard.altair9454 3 жыл бұрын
Ty
@ooomoo9071
@ooomoo9071 3 жыл бұрын
thks
@Pishkoo
@Pishkoo 3 жыл бұрын
God bless you ma friend💖
@busyrand
@busyrand 3 жыл бұрын
Thank you!!! This is fantastic and helpful...
@spondoolie6450
@spondoolie6450 3 жыл бұрын
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 3 жыл бұрын
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.
@cleansermacaroni9892
@cleansermacaroni9892 2 жыл бұрын
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!
@hg-yg4xh
@hg-yg4xh 2 жыл бұрын
He has a gift for teaching, he answered all my unanswered questions all throughout the video that I didn't know how to articulate.
@yashmodi2432
@yashmodi2432 Жыл бұрын
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
@DigitalAlchemyst
@DigitalAlchemyst 2 ай бұрын
I have never done dom maniupluation before. This intro video has mew super comfortable, oh wait by I have done dom manipulation before and just didn't know that is what it was. This video really highlights Kyle living up to his channel name. In this video DOM manipulation has certainly been simplified. Thank you
@ritikyadav7238
@ritikyadav7238 10 ай бұрын
Bro you are too good in explaining
@jimhalpert9803
@jimhalpert9803 3 жыл бұрын
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.
@sankaranarayanan7847
@sankaranarayanan7847 4 жыл бұрын
Was searching for dom related stuff and here it is
@elpolodiablo5486
@elpolodiablo5486 4 жыл бұрын
Typical KZbin comment
@edwingarcia5043
@edwingarcia5043 4 жыл бұрын
Traversy Media has a nice crash course for DOM manupulation, I did learn a lot, of course You need to practice.
@edwingarcia5043
@edwingarcia5043 4 жыл бұрын
@@elpolodiablo5486 wdym ?
@amongdoomers9464
@amongdoomers9464 4 жыл бұрын
@@elpolodiablo5486 😂😂💯
@Odidi_Bee6ix
@Odidi_Bee6ix Жыл бұрын
One of the Best js.DOM tutorials on KZbin
@স্বচ্ছনিরবতা
@স্বচ্ছনিরবতা 4 жыл бұрын
I just started learning DOM manipulation and here you are with the right video at the right time, Thank you much Kyle
@sanjitselvan5348
@sanjitselvan5348 Жыл бұрын
Here's someone who's teaching people stuff that REALLY matters in the frontend world. Thanks a ton Kyle!
3 жыл бұрын
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.
@jaylayoung2576
@jaylayoung2576 Жыл бұрын
Man, you're a lifesaver. I appreciate the work you put in on making these videos so straightforward, yet thorough.
@hamzahahmad1670
@hamzahahmad1670 4 жыл бұрын
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
@mohamedyashar9940 3 жыл бұрын
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.
@seanflood3987
@seanflood3987 3 жыл бұрын
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!
@InsipidTawfiiq
@InsipidTawfiiq 7 ай бұрын
Your tone is very calm and soothing
@ThePaddingtonsChannel
@ThePaddingtonsChannel Жыл бұрын
That "dataset" Property seems really convenient. Learned something new 👍
@flux2956
@flux2956 2 жыл бұрын
Your slider carousel tutorial is much clearer now because of this video. I just had to subscribe.
@FunnyInternetTrends
@FunnyInternetTrends 2 жыл бұрын
Wow amazing tutorial. Thank you. Last part i get goosebumps. CSS in JS is CSS in CamelCase. Wow this changed my life
@samip4sure
@samip4sure 4 жыл бұрын
I've been doing too much React and NodeJS, I was looking for DOM refresher. Great Stuff !
@TheCodingOdyssey
@TheCodingOdyssey 4 жыл бұрын
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 4 жыл бұрын
HTML authors will always need software engineers.
@goisborges
@goisborges 3 жыл бұрын
As soon as I get some availability I'll purchase your course. Don't stop sharing content, bro. Your explanations are great.
@aatish4697
@aatish4697 2 жыл бұрын
Sir, you've helped me a lot. DOM manipulation is the only thing that I've always struggled in HTML JS because I use React more than Vanilla JS. So thanks a lot.
@hnknd
@hnknd 2 жыл бұрын
where exactly do you use vanilla JS. Asking since you already work with a framework?
@aatish4697
@aatish4697 2 жыл бұрын
@@hnknd When I was working for ClerksWell, it's a company based out of London and we still made all Web Projects using HTML, CSS, JS and JQuery
@hnknd
@hnknd 2 жыл бұрын
@@aatish4697 oh okay. I use html css and js for my projects too due to some restrictions in the platform We're working on. I'm a rookie in the field and was thinking of expanding my skillset
@TheCodingOdyssey
@TheCodingOdyssey 4 жыл бұрын
You can hear semi-colon singing ' Wish I was here' in the background' :D
@nabilhaouam8497
@nabilhaouam8497 4 жыл бұрын
😅😅😂, he’s a legend though
@TheCodingOdyssey
@TheCodingOdyssey 4 жыл бұрын
@@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”
@DigitallyAlex
@DigitallyAlex Жыл бұрын
You are a literal life saver Kyle, managed to help me understand how this works in such little time. Thank you!
@logusgraphics
@logusgraphics 3 жыл бұрын
Your channel is amazing. The content is not only educational but very entertaining.
@yasirtahirkheli74
@yasirtahirkheli74 2 жыл бұрын
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.
@cybersamurai99
@cybersamurai99 Жыл бұрын
I am from the future and have checked out the course, and can let everyone know at the present moment that is worth it.
@joeleone6276
@joeleone6276 3 жыл бұрын
This material is presented very easily and understandable for many different skill levels.
@AbhaySingh-dd9xc
@AbhaySingh-dd9xc 4 жыл бұрын
Big student from india❤
@BuzzMarketingKe
@BuzzMarketingKe 2 жыл бұрын
Thanks a lot for making the world an easier place. much appreciation from Kenya.
@chikkiidehalvi5561
@chikkiidehalvi5561 4 жыл бұрын
your videos are very to-the-point and worth the time, exactly what a programmer needs.
@johny962
@johny962 Жыл бұрын
The toggle method is so cool!
@binrueiyang2197
@binrueiyang2197 2 жыл бұрын
Thanks!
@WebDevSimplified
@WebDevSimplified 2 жыл бұрын
You're welcome!
@SK-vg3mw
@SK-vg3mw Жыл бұрын
Thank you, your channel is a goldmine for beginners!
@mayankarote4750
@mayankarote4750 3 жыл бұрын
Thank you for teaching this tough thing in a very simple way
@michaelrooze278
@michaelrooze278 3 жыл бұрын
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?
@philipf2454
@philipf2454 Жыл бұрын
Good introduction to the DOM. Thank you!
@zakariakachani9143
@zakariakachani9143 4 жыл бұрын
Love this man he explain so well and act like a robot. LOVE IT !!
@SorakaOTP462
@SorakaOTP462 2 жыл бұрын
Thankss to your javascript tutorials I learned how to access all of your video files from your website, so now I can watch them for free and I also uploaded them on torrent so everyone is happy ^^
@madinaabbasi3837
@madinaabbasi3837 2 жыл бұрын
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 😻🍬👋🏻
@sebastiansimon7557
@sebastiansimon7557 3 жыл бұрын
1:31 - Another important difference: `.appendChild` returns the appended element, so you can chain methods on its return value. `.append` returns nothing. There’s also the with-scopability difference (Symbol.unscopables), which shouldn’t be too relevant in 2021…
@alyciariley3303
@alyciariley3303 2 жыл бұрын
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!
@tasya_nabila
@tasya_nabila 3 жыл бұрын
It really REALLY help meeeee. I was learning DOM at college but understand nothing at all!! Thank youuu 😢😢😢
@maenam4520
@maenam4520 Жыл бұрын
After 2 years anyone could build his dream project ? Great content and very helpful channel.
@azaramirli2601
@azaramirli2601 Жыл бұрын
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.🙏
@manishwalia1102
@manishwalia1102 3 жыл бұрын
Finally I understood this concept thank u so much sir
@cineverseproductions
@cineverseproductions 3 жыл бұрын
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 KZbinrs. 👍
@gasycube4075
@gasycube4075 4 жыл бұрын
Yeah, I just started learning JS recently! This kind of video just make want to learn mooore! Thanks mate!
@TheCodingOdyssey
@TheCodingOdyssey 4 жыл бұрын
Good luck with your journey. Its a rewarding one.
@leightonbuchanan-cates3932
@leightonbuchanan-cates3932 2 жыл бұрын
This was insanely helpful, especially your explanation about the difference between innerText and textContent. Thank you so much and keep up the amazing work!
@maxlong1374
@maxlong1374 4 жыл бұрын
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.
@dawarlatif3832
@dawarlatif3832 2 жыл бұрын
your way of teaching is elite, there's a request to make a tutorial series on NesstJs framework
@kevingriffin2511
@kevingriffin2511 2 жыл бұрын
Ever was told by your mother to clean your room but was never told how to clean your room. Well that my bootcamp in a nutshell .. thanks to you , You the father who break it down how to clean up lol
@SchnippSchnappShnappi
@SchnippSchnappShnappi 2 жыл бұрын
What an unbelievable treasure was I lucky to find today)
@obasaajibola3933
@obasaajibola3933 2 жыл бұрын
Thank you for your teaching. It has truly helped me in solving a lot of problems I thought I could not solve.
@tiltify2393
@tiltify2393 3 жыл бұрын
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
@Snoo29293
@Snoo29293 4 жыл бұрын
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.
@ManojSatishkumar
@ManojSatishkumar 4 жыл бұрын
I'm in the same path as you brother. I teach web development too and have nearly a decade of professional experience
@TheStoriesKnight
@TheStoriesKnight 2 жыл бұрын
I chose the right decision by subscribing you that night... Thank for all the help...Love from INDIA😍🙏🙏
@priyankaroberts1093
@priyankaroberts1093 2 жыл бұрын
Hey Amit Have you created any projects in JavaScript frameworks? Are you open to opportunities in web development currently?
@imbrad99
@imbrad99 3 жыл бұрын
This video is incredibly helpful, thank you for all that you give to the community. You're brilliant and have taught me so much!
@remoralite6027
@remoralite6027 Жыл бұрын
Awesome content as always, Kyle! Love the Rise Against shirt :)
@jlambert12013
@jlambert12013 2 жыл бұрын
So many question I’ve had for months were answered in this video.
@umazajacker8182
@umazajacker8182 3 жыл бұрын
I genuinely thought this was going to be “DOM Manipulation” in a different context. Damnit.
@juvvalan1654
@juvvalan1654 3 жыл бұрын
Good basics to start
@cassatelite
@cassatelite 3 жыл бұрын
Learning how to manipulate your 'dom' amirite 😏
@VladdyHell
@VladdyHell 2 жыл бұрын
# Methods: - createElement() - append() - appendChild() - remove() - removeChild() - getAttribute() | . - setAttribute() |
@vergilkelley2378
@vergilkelley2378 4 жыл бұрын
you deserve 2 thumbs up. love your content, you make it easy to understand!
@codeAlongwith
@codeAlongwith 2 жыл бұрын
I have really enjoyed this. Thanks so much.
@Peywan
@Peywan Жыл бұрын
thaknks, was a good pace to follow along while you were explaining!
@Supernova12034
@Supernova12034 2 жыл бұрын
Great video! really helped nail down the DOM concepts for me.
@dexmoe
@dexmoe 3 жыл бұрын
love the jackson in your background
@bama2619
@bama2619 11 ай бұрын
brief and fast, thank you.
@nwokporochukwuebuka
@nwokporochukwuebuka 2 жыл бұрын
Thank you sir. Your videos have helped me become a better developer
@ssk7690
@ssk7690 2 жыл бұрын
you're a living legend
@heritiersefu4539
@heritiersefu4539 2 жыл бұрын
Bro this is the best DOM video. thanks
@clami1374
@clami1374 Жыл бұрын
Very clear and nice video. Great job!
@thepopstudio2354
@thepopstudio2354 3 жыл бұрын
You are phreaking awesome! thanks
@grigcnc3504
@grigcnc3504 3 жыл бұрын
Thanx, nice video. DOM-manipulation became simplier
Жыл бұрын
woot Rise Against T, now I know why I like your style!
@kshitijwarankar
@kshitijwarankar 9 ай бұрын
thanks alot it helped alot
@rayankhan12
@rayankhan12 3 жыл бұрын
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 :)
@lovemanga_forever
@lovemanga_forever 2 жыл бұрын
Easy to learn when seeing your video.
@mohammedsufiyan5164
@mohammedsufiyan5164 4 жыл бұрын
Before starting to watch, 👍 to it..
@bk._550
@bk._550 4 жыл бұрын
same
@gautamkanzariya8651
@gautamkanzariya8651 4 жыл бұрын
very good points covered.thanks you sir...
@dansf2
@dansf2 3 жыл бұрын
Well done. You present the material nicely.
@kwalsh7107
@kwalsh7107 2 жыл бұрын
I really appreciate your videos. Explained really well. Thank you!
@michaelanthony4750
@michaelanthony4750 3 жыл бұрын
Concise and thorough
@music6591
@music6591 3 жыл бұрын
Nice video ! Very important part about innerText vs textContent
@101kawsar
@101kawsar 2 жыл бұрын
An alternative to innerHTML is insertAdjesentHTML. Very helpful working with data coming from API.
Learn JavaScript Event Listeners In 18 Minutes
18:03
Web Dev Simplified
Рет қаралды 603 М.
5 Must Know JavaScript Features That Almost Nobody Knows
18:06
Web Dev Simplified
Рет қаралды 478 М.
BAYGUYSTAN | 1 СЕРИЯ | bayGUYS
36:55
bayGUYS
Рет қаралды 1,9 МЛН
UFC 310 : Рахмонов VS Мачадо Гэрри
05:00
Setanta Sports UFC
Рет қаралды 1,2 МЛН
DOM API - JavaScript Tutorial for beginners
42:17
ColorCode
Рет қаралды 39 М.
Learn JavaScript DOM Traversal In 15 Minutes
14:44
Web Dev Simplified
Рет қаралды 229 М.
The CSS Display Property is Changing Forever
15:20
Web Dev Simplified
Рет қаралды 75 М.
5 Signs of an Inexperienced Self-Taught Developer (and how to fix)
8:40
Learn JSON in 10 Minutes
12:00
Web Dev Simplified
Рет қаралды 3,3 МЛН
10 CSS Pro Tips - Code this, NOT that!
9:39
Fireship
Рет қаралды 2,2 МЛН
All The JavaScript You Need To Know For React
28:00
PedroTech
Рет қаралды 670 М.
5+ Must Know HTML Tags That Almost Nobody Knows
15:33
Web Dev Simplified
Рет қаралды 617 М.
How To Build Feature Flags Like A Senior Dev In 20 Minutes
20:33
Web Dev Simplified
Рет қаралды 108 М.
BAYGUYSTAN | 1 СЕРИЯ | bayGUYS
36:55
bayGUYS
Рет қаралды 1,9 МЛН