JavaScript DOM Crash Course - Part 1

Ғылым және технология

This crash course focuses on the DOM WITHOUT JQUERY. In this part we will talk about what the JavaScript DOM (Document Object Model) is and we will look at the different selectors like
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()
We will also look at how to change content and styles via these selectors
BECOME A PATRON: Show support & get perks!
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/traversymedia
COURSES & MORE INFO:
www.traversymedia.com
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ traversymedia
NEW DISCORD CHAT SERVER:
/ discord

Пікірлер: 760

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

    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; }

  • @floatingfortress721

    @floatingfortress721

    Жыл бұрын

    Thank you very much Ashwin! Have a great day 👍

  • @CedricMills

    @CedricMills

    Жыл бұрын

    Gracias!!!😀

  • @muhammadhaiqal531

    @muhammadhaiqal531

    Жыл бұрын

    Tysmm what about part 2 Dom crash course?? Do you also have the code?

  • @eS_Zett
    @eS_Zett6 жыл бұрын

    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()

  • @joshchinwendu

    @joshchinwendu

    5 жыл бұрын

    I love this u always do

  • @ritiksinha2616

    @ritiksinha2616

    5 жыл бұрын

  • @RockDavid

    @RockDavid

    4 жыл бұрын

    Anal

  • @crustindanglade6036

    @crustindanglade6036

    4 жыл бұрын

    David Rock you offering?

  • @noelasaji5238

    @noelasaji5238

    4 жыл бұрын

    Guys who do this are my favourite!!

  • @chevalier5691
    @chevalier56913 жыл бұрын

    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.

  • @daiaasojo7387

    @daiaasojo7387

    9 ай бұрын

    You're right

  • @nabeeljaved1742
    @nabeeljaved17424 жыл бұрын

    i got job because of you. i have watched jquery, javascript and dom, react , ,vue. you have professional content huge respect man !

  • @qureshiowais6951

    @qureshiowais6951

    2 жыл бұрын

    got freeelancing work .

  • @gatosandrea

    @gatosandrea

    2 жыл бұрын

    Hello, what do you recommend to learn after DOM?

  • @dragosgheceanu9847

    @dragosgheceanu9847

    2 жыл бұрын

    @@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

  • @gatosandrea

    @gatosandrea

    2 жыл бұрын

    @@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 :)

  • @garveziukas

    @garveziukas

    2 жыл бұрын

    @@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.

  • @DivineJesusPrayers
    @DivineJesusPrayers6 жыл бұрын

    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!!!

  • @kandysman86

    @kandysman86

    5 жыл бұрын

    @@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 :).

  • @MMABeijing

    @MMABeijing

    4 жыл бұрын

    may i ask where u r from? u expressed your comment so perfectly, i wish i had ur emotionnal intelligence

  • @guslima3681

    @guslima3681

    3 жыл бұрын

    Copy and Paste and Reply that.

  • @thesphider8298

    @thesphider8298

    Жыл бұрын

    @@MMABeijing He's NIGERIAN! I knew that, the moment I red the comment😁

  • @arshadgamer8621
    @arshadgamer86213 жыл бұрын

    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...

  • @sumyataung1249

    @sumyataung1249

    Жыл бұрын

    I can only find 2 videos - would u mind telling me where is parts 3 and 4?

  • @edisononayifeke8279

    @edisononayifeke8279

    Жыл бұрын

    This is a link to the playlist of the rest videos

  • @edisononayifeke8279

    @edisononayifeke8279

    Жыл бұрын

    Here's the link forgot to include it in the previous comment m.kzread.info/head/PLWrdF35wo-ISLXL9R7khxtpZ17jCsmeiv

  • @sumyataung1249

    @sumyataung1249

    Жыл бұрын

    @@edisononayifeke8279 thank you very much ! it means a lot 🖤

  • @millertime6
    @millertime65 жыл бұрын

    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.

  • @bryansharpley4190
    @bryansharpley41906 жыл бұрын

    only part one of four and this is already by a long shot THE BEST DOM explanation ever! Thanks again for amazing tutorials!

  • @josuegarduno7154
    @josuegarduno71545 жыл бұрын

    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.

  • @parakidd
    @parakidd5 жыл бұрын

    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.

  • @zachfotis
    @zachfotis3 жыл бұрын

    The most comprehensive tutorial on DOM manipulation out there. Thank you !

  • @mbounatansijones432
    @mbounatansijones4324 жыл бұрын

    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.

  • @deawar
    @deawar4 жыл бұрын

    In a code camp and this help explain what I wasn't getting. Eternally grateful, Sir!

  • @czarlp
    @czarlp6 жыл бұрын

    Thanks a lot Brad! Not a lot of people can teach though videos but you are definitely one of them.

  • @10Zenil
    @10Zenil5 жыл бұрын

    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

  • @foreverandadave
    @foreverandadave6 жыл бұрын

    Just wanted to thank you for this course! It's been a huge help for me! You da man!

  • @dogstar2020
    @dogstar20206 жыл бұрын

    I've never seen a review of the DOM in plain JS like this before! This is GREAT.

  • @shalinichahar6389

    @shalinichahar6389

    Жыл бұрын

    where is the html code?

  • @shalinichahar6389

    @shalinichahar6389

    Жыл бұрын

    can you tell please tell me if you know

  • @Aserve1st
    @Aserve1st4 жыл бұрын

    Gunna watch all of your JS DOM videos. Very informative, very helpful. Thank you.

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

    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..👏

  • @alexjesus4891
    @alexjesus48914 жыл бұрын

    Thank you for this video! This cleared up many confusing issues I had.

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

    There's always something new to learn from Brad. You have my undying gratitude and respect~!

  • @shibnathroy106
    @shibnathroy1066 жыл бұрын

    Thank you so much for these videos. You are a big inspiration. You motivate me to learn multiple things and also help others

  • @JoelGRodriguez
    @JoelGRodriguez6 жыл бұрын

    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!

  • @genjimccorkle5518
    @genjimccorkle55182 жыл бұрын

    Probably the most helpful course by far, I use dom manipulation quite a bit in my day to day.

  • @markettext
    @markettext4 жыл бұрын

    I watched this video and half way through I learned that I had complicated a relatively simple thing...thanks for clearing it up.

  • @avi12
    @avi126 жыл бұрын

    Wow. Best JavaScript tutorial for beginners! I wouldn't consider myself as a beginner, but you're teaching amazingly!

  • @teiki7756
    @teiki77562 жыл бұрын

    Even in August 2021 this is the best DOM Tutorial on the internet. Thank you Brad for all the great explanations and humble attitude.

  • @orgesymeri1235

    @orgesymeri1235

    2 жыл бұрын

    yeah im learning this too i just completed the JS basics in this playlist... Gonna watch these all i hope it helps me out

  • @robertamarin7982

    @robertamarin7982

    2 жыл бұрын

    jqpwbpnEmsnnen!!bnsb

  • @AlexSheviakov
    @AlexSheviakov6 жыл бұрын

    Simply excellent - as always! Keep up doing a great job!

  • @ukeshrestha
    @ukeshrestha3 жыл бұрын

    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 :)

  • @tz2014
    @tz20146 жыл бұрын

    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

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

    This is the BEST way I've ever seen this explained! Other ways make it too complex! THANKS!

  • @osiobeajiri1711
    @osiobeajiri17112 жыл бұрын

    Your videos are very comprehensive, I 'm learning new things. Thank you

  • @inception252
    @inception2522 жыл бұрын

    i like man teacher seems pretty legit source and completely not time wasting

  • @anseljanson5171
    @anseljanson51714 жыл бұрын

    thanks for the great video brad.very informative,precise and to the point. i was looking for something like this. liked and subscribed

  • @alexlun4464
    @alexlun44643 жыл бұрын

    Amazing video dude, really like the way you explain everything in a way that is easy to understand.

  • @nicoxdundeex1861
    @nicoxdundeex18614 жыл бұрын

    Dude, you're just awesome! very clear and concise.

  • @kesc23
    @kesc232 жыл бұрын

    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!

  • @haechoi5684
    @haechoi56842 жыл бұрын

    Amazing explanation! Just the right pace for me. Thank you.

  • @aerivera
    @aerivera5 жыл бұрын

    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.

  • @MuhammadZubair-xw2pf
    @MuhammadZubair-xw2pf2 жыл бұрын

    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.

  • @akinwaleadegboyega3312
    @akinwaleadegboyega33126 жыл бұрын

    Thanks a lot Brad Traversy. God bless you and your family

  • @nirajdewangan3508
    @nirajdewangan35086 жыл бұрын

    Thanks alot Brad.... Best guide and mentor ever listened. You examples are so good and easy to understand

  • @amoljore7
    @amoljore74 жыл бұрын

    Thank you, Brad for all the great tutorials

  • @kunalpandey7189
    @kunalpandey71894 жыл бұрын

    thank you very much for these free tutorials.....you are doing a lot for learners like us.Thank you again

  • @RockstahRolln
    @RockstahRolln6 жыл бұрын

    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!!

  • @TraversyMedia

    @TraversyMedia

    6 жыл бұрын

    RockstahRolln thank you very much

  • @ga7853
    @ga78536 жыл бұрын

    Thank you so much, for this tutorial that is full of info and yet so clear and easy to grasp.

  • @sureshkrishnan83
    @sureshkrishnan835 жыл бұрын

    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

  • @justsurfrax
    @justsurfrax6 жыл бұрын

    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.

  • @TraversyMedia

    @TraversyMedia

    6 жыл бұрын

    Adam H. Thats so awesome. Very inspiring 😊

  • @universal4334
    @universal43344 жыл бұрын

    Hey Brad , I haven't seen such a wonderful lecture on dom . Planned really nice by making parts ....

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

    Extremely helpful and professionally done. Thank you.

  • @madleed4727
    @madleed47276 жыл бұрын

    Things that I already know pretty well, but grateful for the memory refresh, thanks :)

  • @Chicgeek88
    @Chicgeek886 жыл бұрын

    This was right on time! I started learning about the DOM today!!!

  • @allan-acosta

    @allan-acosta

    3 жыл бұрын

    Same. Lol

  • @rabahrezkellah2525

    @rabahrezkellah2525

    2 жыл бұрын

    @@allan-acosta How is it going for youu???

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

    Just watched it fully! Very clear explanation! Great! Thanks !

  • @shadymohammed3197
    @shadymohammed31976 жыл бұрын

    I just wanna say thank you for your time and efforts U taught me alot

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

    Here from TOD. Found this first episode very informative. Looking forward for the next episodes! Thank you.

  • @ashishnath7413

    @ashishnath7413

    10 ай бұрын

    and now i'm here from TOP :)

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

    BEST TUTORIAL FOR JAVASCRIPT EVER SEEN! 🤩🤩🙂👍🏼👍🏼Master for teaching!!

  • @00el04
    @00el043 жыл бұрын

    amazing video Brad, can't wait to watch the other videos to brush up my skills :)

  • @darrensanders7509
    @darrensanders75094 жыл бұрын

    Extremely helpful and professionally done. Thank you. Will be finding you on Udemy

  • @rivaldoouchen8437
    @rivaldoouchen84375 жыл бұрын

    Thank you So much Brad, Awesome Tut.

  • @frankie_goestohollywood
    @frankie_goestohollywood4 жыл бұрын

    Hello Brad, Thank you as always...this has helped to clarify some blocks I'm currently having :-/ I will prevail with excellent help from teachers like yourself :-)

  • @vimalchawla6740
    @vimalchawla67403 жыл бұрын

    Love your tutorials. Great job. Thank you.

  • @slimlaouini7997
    @slimlaouini79972 жыл бұрын

    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.

  • @Theorchero

    @Theorchero

    5 ай бұрын

    How did it go?

  • @increment-
    @increment- Жыл бұрын

    Thank you Brad! Appreciate the videos as always 🙂

  • @fogaamos6822
    @fogaamos68222 жыл бұрын

    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

  • @ronyan
    @ronyan5 жыл бұрын

    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.

  • @congxiao1989
    @congxiao19894 жыл бұрын

    Fantastic crash course mate, thank you!

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

    Thank you for such an easy to understand and clear video!!! Loved it!!

  • @toomurmu9148
    @toomurmu91484 жыл бұрын

    Best video on the internet ! Just cleared it all at once..!😊

  • @nonsolovita
    @nonsolovita5 жыл бұрын

    this serie is really appreciated thx Brad

  • @TheRole11intelligent
    @TheRole11intelligent3 жыл бұрын

    Thanks, Brad you're definitely the best!

  • @ammaralim1931
    @ammaralim19316 жыл бұрын

    Brad, You are changing the world!

  • @imajt5
    @imajt54 жыл бұрын

    Thanks for the course. Really Helpful.

  • @robertbailey9441
    @robertbailey94415 жыл бұрын

    Thank you!! perfect lesson.

  • @TheMdtariq
    @TheMdtariq6 жыл бұрын

    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

  • @lavkushsingh3618
    @lavkushsingh36184 жыл бұрын

    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.

  • @bigGodstudiosgh
    @bigGodstudiosgh3 жыл бұрын

    hey Brad your courses are just perfect and help to me thank you very much

  • @frontenddeveloper5895
    @frontenddeveloper58955 жыл бұрын

    Thanks Traversy Media I really learn a lot from your series It is very good experience thanks again from a Pakistani boy ❤❤❤

  • @shwetabhshekhar1282
    @shwetabhshekhar12825 жыл бұрын

    Clear and concise. Thanks Man!

  • @rorjackson
    @rorjackson4 жыл бұрын

    Thank you soooo much, You are best teached and mentor. I really love your videos, love and respect.

  • @mushrafaltaf
    @mushrafaltaf3 жыл бұрын

    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.

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

    what a video man thank you so much for providing this ! Keep it goin.

  • @mugilan9257
    @mugilan92575 жыл бұрын

    Hi Brad , fantastic teaching! Keep it up

  • @MichaelSalo
    @MichaelSalo5 жыл бұрын

    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.

  • @KDOERAK
    @KDOERAK5 жыл бұрын

    a great lecture: clear, to the point

  • @tacva2607
    @tacva26073 жыл бұрын

    You are excellent, Thanks Brad for everything

  • @wiskassaquetas123
    @wiskassaquetas1234 жыл бұрын

    Thank you for saving me in my web development exam next week haha :D

  • @shahrzadalbertsson9779
    @shahrzadalbertsson97794 жыл бұрын

    Thank you!!! That was perfect

  • @ronaldjohnson4470
    @ronaldjohnson44706 жыл бұрын

    Thank you Brad, excellent video

  • @chiboreache
    @chiboreache6 жыл бұрын

    Simple plain without haste - thank you a lot!

  • @Radiosabines
    @Radiosabines3 жыл бұрын

    Thank you master , i love the way u explain things

  • @ai.201
    @ai.2014 жыл бұрын

    Always scared of learning java script, you made it so easy man.

  • @jaggyjut
    @jaggyjut4 жыл бұрын

    Great Tutorial. Thank you Brad.

  • @MuhammadSaeed-lq4ru
    @MuhammadSaeed-lq4ru2 жыл бұрын

    Amazing Tutorial :). Your way of teaching is awesome. Thank You very much :)

  • @JCL-nu4ge
    @JCL-nu4ge5 жыл бұрын

    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

    @simonkiragu254

    6 ай бұрын

    Hi, how far with the journey. I am getting started too

  • @xhappybunnyx

    @xhappybunnyx

    4 ай бұрын

    @@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

  • @manisarhimli1744
    @manisarhimli17443 жыл бұрын

    Thank you. That video is perfect❤️

  • @geraldwatanabe2228
    @geraldwatanabe22286 жыл бұрын

    Good stuff clear and concise!

  • @fabiola761
    @fabiola7616 жыл бұрын

    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 ;)

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

    BEST TUTORIAL FOR JAVASCRIPT EVER SEEN! 🤩🤩🤩🥰👍🏼🙂👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼Master for teaching!!

  • @sujaan303
    @sujaan3034 жыл бұрын

    It was very helpful, thanks for your efforts, Looking forward for more guidance videos from your end. specially JAVASCRIPT & REACT JS. (Git, GitHub,..........& all)

  • @shockxrock.4644
    @shockxrock.46445 жыл бұрын

    great video! u demystify dom. thanks a million

Келесі