Hi Brad, for all the work and content you put out in this channel, you have my undying respect and gratitude. It takes a heart full of compassion, dedication and commitment to do what you do consistently. May you NEVER lack for energy, wisdom and resources to continue this great work. Thanks a million times over!!!
@@shadydelivery me too. I couldnt afford bootcamp, but this man single handedly made coding "click" for me. So much so, that 6 months of learning with random tutorials was surpassed by watching this channel for 1 month. Ive got my first landing page to build this week (first paying project period). Im so exited. I was ovwrwhelmed by all the stuff i needed to learn, but once it clicked, the thought of learning all the new tools makes me happy, not scared anymore :).
@@gatosandrea after DOM you are ready to work, just have a portfolio with projects if to learn - then it is surely React, Vue or Angular and also Git and Npm
@@dragosgheceanu9847 Ooh, okay. I think I'd do some projects because I tend to forget some syntax and how things work. If to learn, which one you'd recommend me to learn first? And anyway, thank u so much for your answer :)
@@gatosandrea Look for which one is the most popular in your area or what companies you want to work for use. Generally speaking you cannot go wrong with React since it's popular everywhere and most employers ask you to know one of those three anyway, no need to learn all of them, focus on truly understanding how things work and how to write code that does what you want it to do instead of going on a frameworks/tools/libraries frenzy many beginners fall for. It's also really important to feel comfortable with vanilla JS, too.
Kind of insane to think that Brad single-handedly pumped thousands of future developers and engineers into the world. And it all start with small series like this. Couldn't thank you enough, Brad.
I am one of them , I used to download Brads videos where ever I get free WIFI and practice them at home . Today I am Tech Lead , I have my youtube channel like giving back to the community . Thank you Brad
Dude, this was the best explanation I've seen of this concept. Most of the tutorials I've seen run through the material so fast they forget to lay out the logic, then they give you a project to do before you even learn it! It sucks because I then have to go somewhere else to fill in the gaps.
Yet another amazing video , so useful, 90% of what I know on how to code from you, before I even knew it was you I bought several eudonix courses and than I arrived to your youtube channel (or I believed I was in both at the same time but never paid attention that it was exact the same voice) , you are a great teacher and post every day.. I opened many apps in the last months and this would have never happened if it wasn't because of your teachings.
Took me around ninety minutes to get through the entire video because I was taking notes and coding along. You have such a great way to explain concepts that I couldn't understand yet.
I can't lie, many things seems strange untill I watch and practicalised this tutorial. this video is everything I need right now....Thank you for this master piece..👏
i have been trying to learn about DOM the whole day by finding resources on the internet, but cant understand it fully. This video is a gem for real, cleared all my doubts i had about DOM
Holy shit this guy is a real master. I learnt so fucking much in this 100 mins and there are 46 more videos in this playlist alone! Who needs university? There are MIT and Harvard CS lectures online for free if you require advanced CS and math topics.
You deserve a lot more subscriber but it also proves that the most of the people that wanna program are less and enjoy watching comedy or vlogs that means less competition for us . Well whatever and keep doing what you are doing. Thanks a lot again :)
Yes!!!! I am SUPER EXCITED to see this course!! MANY MANY THANKS!! I will be more than happy to be Patreon supporter! I will commence a monthly donation. Thanks a LOT Brad!! God Bless You!!
You are really genius. I was really confused actually about DOM. What is it and where can we use it?. Man you explained it very well and now i understood all of that. Lots of respect for u.
because of only your teaching style i have disabled adblocker on your channel....... best course on youtube and also best channel on youtube.hope you will reach 1 million suscriber very soon.
Hy Brad, I wanted to thank for all the crash courses you make. I'm from Tunisia and I live in France and I'm going to integrate the web developpment courses in less than 1 month and all your crash courses help me alot. Thank you very much.
In case anyone wonders, you don't need querySelectorAll for odd/even. Just use an if statement with modulus like x % 2 == 0. This can be handy for dynamically generating tables also.
If I had seen this two months ago, I might still have a job! This is one of the best tutorials I have seen on javascript taking me right back to the basics that I really could have used a long time ago. In the future, I will definitely have a lot better progress on my endeavors...
This was really useful more than a full length tutorial imo. i tried understanding DOM and left it in middle, now this time i am determined to learn by your tutorial. Thank you soo much , keep uploading awesome stuff like these. i am glad i stumbled upon your channel
I spent a good minute looking around for a video to explain how to work with the DOM. This is the only one I found lol. Very informative and actually helped me understand JS better as well also. Thank you.
Hey dude, just wanted to say thank you. I just joined your $2 tier on Patreon... wish I could do the higher tier, but perhaps once I start making $ as a freelance developer I will. I have learned quite a bit from you and teaching style and I value an appreciate your work!
You are awesome Brad have been subscribing to a lot of channels but when i hit traverse media i was like woow! this was what i was looking for.Thanks so much u always teach amazing staffs
This is awesome! Started my JavaScript journey a few days ago and now learning about Functions, Objects, Arrays, and Variables, then this popped up on my recommendation list so I decided to check it out. After the first 10 minutes of the video, I was just in awe after you used JavaScript to pull up all the information in the HTML... It was like magic!
@@simonkiragu254 check out launch school, and also DOM is, for me, like a year into the curriculum so don't worry if it doesn't make sense! There are so many weird quirks to JS that really help if you get a handle on first
I am not seeing any html file link. Edited: hey people, it seems that somehow the code link has been deleted. But you can still get the link in the part-2 video's description box. Thank you
I'm writing this comment to help anyone else that comes upon this video with the same issue as me. I would console log and have an output that would change with page refresh and did not even resemble what was being shown in the video. the solution is go to the settings in the console of your web browser and make sure you have the option "preserve log upon navigation" is turned ON. anyways, wonderful video. Just trying to save someone some time if they encounter this issue. Cheers~
Its probably too late, but if anyone else is wondering like i did: In the Description of the Part 2 Series is the HTML code link (it looks like the code also used in this video)
It pleased me to see document.all mentioned here. An IE era invention that is shunned today but was once indispensable. It's more than a mere indexed collection by the way. It can also access elements by ID or name. It has superpowers.
This looks like an amazing course and I am looking forward to going through all four videos! One question, is the html file still available for download?
Wow! your channel was suggested after searching JavaScript online courses. Wish I had found your channel before. Thank you for sharing your knowledge, everything was so easy to follow, always had the idea JavaScript was a pain in the @$$ but it seems like I'll enjoy the full series. Cheers.
Bred, Thank You much for your courses. Please think about making a video for VS code features Ctrl+D is nice to change multiple entries at once Alt+Ctrl+DownArrow is coping marked text Alt+Down(Up)Arrows moves the text And MS could be a sponsor of the video for sure ;)
! Important (Be careful while using querySelector and querySelectorAll). when you manipulate the DOM (i.e adding or removing elements by JavaScript) the added new element's references are not going to be in the node list selected by querySelector and querySelectorAll methods.They are static lists.
Keytron Quabius nope, but i have done an apprenticeship and done all the online stuff (code academy, freecodecamp, the odin project etc) and now im a full time web developer i recently got employed full time to make ecommerce websites !
Love your content. Really makes understanding these concepts easy. One can really see the amount of effort you put into this as you even provided us with the file to go through this with you. Thanks fort this great content as always.
This is awsome .. thanks travis :) i am a system admin started learning web developement :) your video is really helping me .. keep up the good work. Cheers
02:45 DOM Introduction
04:52 HTML Structure
07:07 Examine the Document Object (console.dir() & console.log())
15:43 Selectors
15:54 getElementById()
22:29 getElementsByClassName()
27:11 getElementsByTagName()
29:14 querySelector()
34:48 querySelectorAll()
I love this u always do
❤
Anal
David Rock you offering?
Guys who do this are my favourite!!
Hi Brad, for all the work and content you put out in this channel, you have my undying respect and gratitude. It takes a heart full of compassion, dedication and commitment to do what you do consistently. May you NEVER lack for energy, wisdom and resources to continue this great work. Thanks a million times over!!!
@@shadydelivery me too. I couldnt afford bootcamp, but this man single handedly made coding "click" for me. So much so, that 6 months of learning with random tutorials was surpassed by watching this channel for 1 month. Ive got my first landing page to build this week (first paying project period). Im so exited. I was ovwrwhelmed by all the stuff i needed to learn, but once it clicked, the thought of learning all the new tools makes me happy, not scared anymore :).
may i ask where u r from? u expressed your comment so perfectly, i wish i had ur emotionnal intelligence
Copy and Paste and Reply that.
@@MMABeijing He's NIGERIAN! I knew that, the moment I red the comment😁
i got job because of you. i have watched jquery, javascript and dom, react , ,vue. you have professional content huge respect man !
got freeelancing work .
Hello, what do you recommend to learn after DOM?
@@gatosandrea after DOM you are ready to work, just have a portfolio with projects
if to learn - then it is surely React, Vue or Angular and also Git and Npm
@@dragosgheceanu9847 Ooh, okay. I think I'd do some projects because I tend to forget some syntax and how things work. If to learn, which one you'd recommend me to learn first? And anyway, thank u so much for your answer :)
@@gatosandrea Look for which one is the most popular in your area or what companies you want to work for use. Generally speaking you cannot go wrong with React since it's popular everywhere and most employers ask you to know one of those three anyway, no need to learn all of them, focus on truly understanding how things work and how to write code that does what you want it to do instead of going on a frameworks/tools/libraries frenzy many beginners fall for. It's also really important to feel comfortable with vanilla JS, too.
For anyone who needs to the HTML and CSS file. I'm not using bootstrap.
Item Lister
Add Items
Items
item 1
item 2
item 3
item 4
/*--- CSS ---*/
/*-------- GENERAL --------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.container {
padding: 0px 25px;
}
/*-------- HEADER --------*/
#main-header {
background-color: rgb(0, 126, 0);
height: 70px;
display: flex;
align-items: center;
padding: 20px;
}
#header-title {
color: white;
font-size: 40px;
}
/*-------- MAIN CONTENT --------*/
#main {
border: 1px solid rgb(180, 180, 180);
padding: 20px;
margin-top: 20px;
}
.title {
margin: 20px 0px;
font-size: 30px;
}
.title:first-child {
margin-top: 0px;
}
input {
height: 30px;
border: 1px solid rgb(180, 180, 180);
}
.btn {
background-color: rgb(39, 39, 39);
color: white;
width: 100px;
border: 0px;
cursor: pointer;
}
.list-group-item {
border-bottom: 1px solid rgb(180, 180, 180);
list-style-type: none;
margin-bottom: 20px;
}
.list-group-item:last-child {
margin-bottom: 10px;
}
Thank you very much Ashwin! Have a great day 👍
Gracias!!!😀
Tysmm what about part 2 Dom crash course?? Do you also have the code?
have a realy lovely day thanks
You got my respect thank you 🙌❤
DOM is most important topic for web development, but it is often missed by many youtubers...
You created 4 videos on DOM, Thanks a lot...
I can only find 2 videos - would u mind telling me where is parts 3 and 4?
This is a link to the playlist of the rest videos
Here's the link forgot to include it in the previous comment m.ua-cam.com/play/PLWrdF35wo-ISLXL9R7khxtpZ17jCsmeiv.html
@@edisononayifeke8279 thank you very much ! it means a lot 🖤
Kind of insane to think that Brad single-handedly pumped thousands of future developers and engineers into the world. And it all start with small series like this. Couldn't thank you enough, Brad.
You're right
I am one of them , I used to download Brads videos where ever I get free WIFI and practice them at home . Today I am Tech Lead , I have my youtube channel like giving back to the community . Thank you Brad
Even in August 2021 this is the best DOM Tutorial on the internet. Thank you Brad for all the great explanations and humble attitude.
yeah im learning this too i just completed the JS basics in this playlist... Gonna watch these all i hope it helps me out
jqpwbpnEmsnnen!!bnsb
Dude, this was the best explanation I've seen of this concept. Most of the tutorials I've seen run through the material so fast they forget to lay out the logic, then they give you a project to do before you even learn it! It sucks because I then have to go somewhere else to fill in the gaps.
I've never seen a review of the DOM in plain JS like this before! This is GREAT.
where is the html code?
can you tell please tell me if you know
Here from TOD. Found this first episode very informative. Looking forward for the next episodes! Thank you.
and now i'm here from TOP :)
Yet another amazing video , so useful, 90% of what I know on how to code from you, before I even knew it was you I bought several eudonix courses and than I arrived to your youtube channel (or I believed I was in both at the same time but never paid attention that it was exact the same voice) , you are a great teacher and post every day.. I opened many apps in the last months and this would have never happened if it wasn't because of your teachings.
Adam H. Thats so awesome. Very inspiring 😊
Took me around ninety minutes to get through the entire video because I was taking notes and coding along. You have such a great way to explain concepts that I couldn't understand yet.
I can't lie, many things seems strange untill I watch and practicalised this tutorial. this video is everything I need right now....Thank you for this master piece..👏
There's always something new to learn from Brad. You have my undying gratitude and
respect~!
This was right on time! I started learning about the DOM today!!!
Same. Lol
@@allan-acosta How is it going for youu???
only part one of four and this is already by a long shot THE BEST DOM explanation ever! Thanks again for amazing tutorials!
The most comprehensive tutorial on DOM manipulation out there. Thank you !
i have been trying to learn about DOM the whole day by finding resources on the internet, but cant understand it fully. This video is a gem for real, cleared all my doubts i had about DOM
Extremely helpful video series. Where all my TOP homies at?
Holy shit this guy is a real master. I learnt so fucking much in this 100 mins and there are 46 more videos in this playlist alone!
Who needs university? There are MIT and Harvard CS lectures online for free if you require advanced CS and math topics.
i like man teacher
seems pretty legit source and completely not time wasting
Probably the most helpful course by far, I use dom manipulation quite a bit in my day to day.
You deserve a lot more subscriber but it also proves that the most of the people that wanna program are less and enjoy watching comedy or vlogs that means less competition for us .
Well whatever and keep doing what you are doing. Thanks a lot again :)
Yes!!!! I am SUPER EXCITED to see this course!! MANY MANY THANKS!! I will be more than happy to be Patreon supporter! I will commence a monthly donation. Thanks a LOT Brad!! God Bless You!!
RockstahRolln thank you very much
This is amazing, I'm currently leaning the JS and started learning DOM and this is really helpful. Thank you
hello how is your learning, i am almost 3 weeks into this.
@@succeeder3044 it's going great, I use multiple sources, but mostly mdn
@@TheEmperorXavier thanks dear, i am grateful for your response
You are really genius. I was really confused actually about DOM. What is it and where can we use it?. Man you explained it very well and now i understood all of that. Lots of respect for u.
This is the BEST way I've ever seen this explained! Other ways make it too complex! THANKS!
because of only your teaching style i have disabled adblocker on your channel....... best course on youtube and also best channel on youtube.hope you will reach 1 million suscriber very soon.
Hy Brad,
I wanted to thank for all the crash courses you make.
I'm from Tunisia and I live in France and I'm going to integrate the web developpment courses in less than 1 month and all your crash courses help me alot.
Thank you very much.
How did it go?
In case anyone wonders, you don't need querySelectorAll for odd/even. Just use an if statement with modulus like x % 2 == 0. This can be handy for dynamically generating tables also.
If I had seen this two months ago, I might still have a job!
This is one of the best tutorials I have seen on javascript taking me right back to the basics that I really could have used a long time ago. In the future, I will definitely have a lot better progress on my endeavors...
lextual if you don't mind me asking, what did your job require from JavaScript?
Hello Brad! First of i just wanna say am a big fan of your work. I recently got into web development, and am currently on javascript thanks to you.
Just wanted to thank you for this course! It's been a huge help for me! You da man!
This was really useful more than a full length tutorial imo. i tried understanding DOM and left it in middle, now this time i am determined to learn by your tutorial.
Thank you soo much , keep uploading awesome stuff like these. i am glad i stumbled upon your channel
BEST TUTORIAL FOR JAVASCRIPT EVER SEEN! 🤩🤩🤩🥰👍🏼🙂👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼Master for teaching!!
I spent a good minute looking around for a video to explain how to work with the DOM. This is the only one I found lol. Very informative and actually helped me understand JS better as well also. Thank you.
Hey dude, just wanted to say thank you. I just joined your $2 tier on Patreon... wish I could do the higher tier, but perhaps once I start making $ as a freelance developer I will. I have learned quite a bit from you and teaching style and I value an appreciate your work!
Thanks a lot Brad! Not a lot of people can teach though videos but you are definitely one of them.
BEST TUTORIAL FOR JAVASCRIPT EVER SEEN! 🤩🤩🙂👍🏼👍🏼Master for teaching!!
In a code camp and this help explain what I wasn't getting. Eternally grateful, Sir!
thank you very much for these free tutorials.....you are doing a lot for learners like us.Thank you again
You are awesome Brad have been subscribing to a lot of channels but when i hit traverse media i was like woow! this was what i was looking for.Thanks so much u always teach amazing staffs
I watched this video and half way through I learned that I had complicated a relatively simple thing...thanks for clearing it up.
This is awesome! Started my JavaScript journey a few days ago and now learning about Functions, Objects, Arrays, and Variables, then this popped up on my recommendation list so I decided to check it out. After the first 10 minutes of the video, I was just in awe after you used JavaScript to pull up all the information in the HTML... It was like magic!
Hi, how far with the journey. I am getting started too
@@simonkiragu254 check out launch school, and also DOM is, for me, like a year into the curriculum so don't worry if it doesn't make sense! There are so many weird quirks to JS that really help if you get a handle on first
I am not seeing any html file link.
Edited: hey people, it seems that somehow the code link has been deleted. But you can still get the link in the part-2 video's description box. Thank you
Thanks!
Thanks!
Thanks man
@@abhishekr.6026 Hey! I have a classmate named same as you (surname as well) what a coincidence lul.
@@ranjeet5806 xD happens ig
Brad, You are changing the world!
I am watching this video today, everlasting content from traversy.
SAME HERE 😁
Thank you so much for these videos. You are a big inspiration. You motivate me to learn multiple things and also help others
Dude, you're just awesome! very clear and concise.
Thanks Brad, you are number one my programming success list of contributors, i love you, i can't wait to meet you some day to just say thank you
Your videos are very comprehensive, I 'm learning new things. Thank you
I'm writing this comment to help anyone else that comes upon this video with the same issue as me. I would console log and have an output that would change with page refresh and did not even resemble what was being shown in the video. the solution is go to the settings in the console of your web browser and make sure you have the option "preserve log upon navigation" is turned ON. anyways, wonderful video. Just trying to save someone some time if they encounter this issue. Cheers~
Hey Brad, Wonderful explanation as always. I couldn't find the HTML code link in the description. I will be happy if you can help.Thanks
Its probably too late, but if anyone else is wondering like i did: In the Description of the Part 2 Series is the HTML code link (it looks like the code also used in this video)
@@Volume201 in my case that didnt work as well lol, the site would crash every time so i headed to google and manually searched for his github repo...
The link under the forth video works properly at this time, in case anybody needs it
Just go to the 4th video and you will find a link to the codepen. Copy the code and install bootstrap via CDN.
@@techtycho4752 Than you I was trying to find the html file as well
This was exactly what i was looking for. I really needed to know JS, the logic part for me is easy but I couldn't understand the DOM. Now I'm happy!
first off, you sound like Ray Liotta's narration as Henry Hill in Goodfellas, and it is amazing. second, your videos are very helpful.
lol makes it so easy to listen to! :D
It pleased me to see document.all mentioned here. An IE era invention that is shunned today but was once indispensable. It's more than a mere indexed collection by the way. It can also access elements by ID or name. It has superpowers.
This looks like an amazing course and I am looking forward to going through all four videos! One question, is the html file still available for download?
It is strange assumption to change background colour for items but not for you .
Wow! your channel was suggested after searching JavaScript online courses. Wish I had found your channel before. Thank you for sharing your knowledge, everything was so easy to follow, always had the idea JavaScript was a pain in the @$$ but it seems like I'll enjoy the full series. Cheers.
Thanks Brad. I'm following your videos and all of them are so amazing. You're a crack ! Greetings from Colombia ! (Sorry for my english)
Never apologise for learning a new language. You are awesome for giving it a go! :D
Gunna watch all of your JS DOM videos. Very informative, very helpful. Thank you.
Wow. Best JavaScript tutorial for beginners!
I wouldn't consider myself as a beginner, but you're teaching amazingly!
Just watched it fully! Very clear explanation! Great! Thanks !
Amazing video dude, really like the way you explain everything in a way that is easy to understand.
What if there are lots of tags in the document and you want to change all the that is inside a specific div tag, how to work on with that?
Always scared of learning java script, you made it so easy man.
thanks for the great video brad.very informative,precise and to the point.
i was looking for something like this.
liked and subscribed
Best video on the internet !
Just cleared it all at once..!😊
Bred, Thank You much for your courses.
Please think about making a video for VS code features
Ctrl+D is nice to change multiple entries at once
Alt+Ctrl+DownArrow is coping marked text
Alt+Down(Up)Arrows moves the text
And MS could be a sponsor of the video for sure
;)
Using this everyday! Good advices
Extremely helpful and professionally done. Thank you.
Simply excellent - as always! Keep up doing a great job!
Awesome content!!
There doesn't seem to be link to the HTML in the description. Or Am I missing something?
Thank you soooo much, You are best teached and mentor. I really love your videos, love and respect.
Thanks alot Brad.... Best guide and mentor ever listened. You examples are so good and easy to understand
! Important (Be careful while using querySelector and querySelectorAll).
when you manipulate the DOM (i.e adding or removing elements by JavaScript) the added new element's references are not going to be in the node list selected by querySelector and querySelectorAll methods.They are static lists.
Thanks Traversy Media I really learn a lot from your series It is very good experience thanks again from a Pakistani boy ❤❤❤
Amazing explanation! Just the right pace for me. Thank you.
Best DOM tutorial online, thanks
Nice one Mate Very Nice/ Part Two lets go.
Hey!! I don't find the files you worked with in this video description. Can you please share them? Thanks in advance.
One thing I found very amazing. No matter the play speed I can still hear what you say. Are you a machine?
Thanks, Brad you're definitely the best!
what a video man thank you so much for providing this ! Keep it goin.
Thank you for this video! This cleared up many confusing issues I had.
Brad can you make javascript oop crash course about prototype, bind, creating classes, objects ?
"JavaScript, understanding the weird parts" buy that course, you won't be disappointed
I think he might have already in an ES6 series..
Why wouldn't you focus on the functional js paradigm instead?
Small Business Advisors most jobs in my area are oop JavaScript so i guess it depends where you live
Keytron Quabius nope, but i have done an apprenticeship and done all the online stuff (code academy, freecodecamp, the odin project etc) and now im a full time web developer i recently got employed full time to make ecommerce websites !
Where do I download the html file? Its not in the description.
Same question
Thank you for saving me in my web development exam next week haha :D
I am From Uganda Kampala For your respect I leave adds to play and even click on them just for the support
Thank you Brad! Appreciate the videos as always 🙂
you teach more than a university , your channel should be traversy university
Hey Brad , I haven't seen such a wonderful lecture on dom . Planned really nice by making parts ....
this serie is really appreciated thx Brad
Love your content. Really makes understanding these concepts easy. One can really see the amount of effort you put into this as you even provided us with the file to go through this with you. Thanks fort this great content as always.
Where did you find the file?
@@mariafrankoaas7256 It's been 1 year since I wrote this but I found a link in the description of video 4
Thank you for such an easy to understand and clear video!!! Loved it!!
This is awsome .. thanks travis :) i am a system admin started learning web developement :) your video is really helping me .. keep up the good work. Cheers
Man.. your the best ...I will be a regular donor...and many thanks
Thanks a lot Brad Traversy. God bless you and your family
coming from odin Project keep grinding guys
Great and clear video! Thank u so much!!!
My entire webdev journey could have been much harder without Traversy Media.