Modern JavaScript Tutorial #6 - The Document Object Model

💻 Get the full Modern JavaScript (novice to ninja) course from Udemy. Discount auto applied:
www.thenetninj...
Hey ninjas, in this modern JavaScript tutorial I'll explain the basics of the DOM (document object model) and show you how to query elements using the query selector & change the content f a web page.
----------------------------------------
🐱‍💻 🐱‍💻 Course Links:
+ Course files - github.com/iam...

[@Raspace]

0:45 DOM Introduction 7:05 Query Selector 12:15 Query Selector All 15:38 Getting element by ID 16:56 Getting element by Class Name 19:18 Getting element by Tag Name 21:06 Changing text inside element 25:36 Changing HTML inside element 30:50 Getting and setting attribute of element 42:19 Adding and removing class 45:55 Challenge 51:08 Toggling class

[@markwilde5683]

Thank you friend!

[@lucymcloughlin6190]

You! 😍

[@ahsanjawaid7014]

Thank you so much

[@_.Mustafa._]

Thanks man !

[@jimhalpert9803]

Hero

[@GJihed]

One of the best Javascript course I've ever seen, really thank you for this work, very well structured, simple and very very very easy to understand. It's not easy to for me to be 100% concentrated on 60 min video but you just did it. I learned so much and i recommend this course to any beginner or experienced developer who want to know more about Javascript.

[@NetNinja]

Thanks Jihed :)

[@mykhailorozantsev8312]

Great gob ninja, I grab your curs on Udemy see you gays there !

[@CaleCabrera07]

I just finished the whole tutorial and I must say It’s one of the greatest tutorials I’ve ever taken! Absolutely useful even 2 years later 🤯 Thank you so much shaun, appreciate it 🙌🏻

[@gslvqz8812]

I followed your tutorials until this point. I successfully completed the assignment of giving the class of error/success to the elements without watching your explanation. That was huge for me because I have been trying to learn and I always get discourage by the way other instructors have approach their tutorials/courses. But it goes with no saying, that I have just purchased your course and I am committed to work on it diligently. Thank you for sharing your work until this point and thank you for putting together the complete course on Udemy.

[@NetNinja]

Thank you so much, I really hope you enjoy the rest of the course & that it offers you as much value :).

[@bracekev]

You ARE the absolute BEST Instructor I have ever had. I have been programming for 23 years and you are hands down the BEST Instructor ever!!! Thank you!!!

[@NetNinja]

Wow, thank you! :) means a lot

[@rawhasan1180]

The best style of teaching a complex thing I've ever had! Thank you so much for keeping it free! I'll recommend anyone looking for learning JavaScript to sign-up for the Udemy course by this author.

[@NetNinja]

Thanks so much :)

[@scooble]

I've watched quite a few tutorials from various knowledgeable experts, who clearly know what they're talking about, but I found myself getting lost when they don't refer back to the results or the original HTML often enough. When learning, I find it important to clearly show the results both before and after performing some action. You clearly did this and I now come away with a better mental model of how to do DOM scripting.

[@peixefelipe16]

This is the best DOM tutorial I've found! And I looked for it everywhere. Thank you, The Net Ninja!

[@NetNinja]

Glad it was helpful! :)

[@julianjohnmert8658]

I came to Sensei Shauns channel for a github tutorial. Now I know html and css as well as modern javascript XD. You're content is not only amazing but it is addictive like a television series because you are such a fantastic teacher and I will be purchasing almost every course you have when I start work in March 2021. I am proud to be a ninja.

[@geralddarkobekoe]

Thanks a lot man,i finished the entire playlist and it was gold.You're not just saving Princess Peach but guys like me too hahaha

[@NetNinja]

Haha glad to hear :D

[@yayitseugene]

Just finished your six videos on modern JS! Your tutorials are more clear than my CS professor. Ended up getting the rest of this course, try to be a JavaScript pro 💪

[@daivikverma07]

thank you this is the best js course on youtube! first time i understood and coded js like that, great work man!

[@NetNinja]

Thanks Daivik, glad it helped!

[@triducal]

one of the best instructors on youtube. You've taught me a ton of html, css, and js in 2 weeks and I'm picking it up pretty quickly.

[@Onepiece-471]

I like your logo btw

[@triducal]

@@Onepiece-471 thanks

[@dawoodchowdhury5581]

Hey man. Your lectures are so clear and concise. Thank you so much for putting these up!

[@Shifan76]

Teaching is an art and Shaun is gifted that. Thank you so much for the great tutorial. I will definitely enroll to the Udemy course to continue with other sections. Keep up your good work.

[@NetNinja]

Thank you for the support and kind words Mohamed - means a lot!

[@sakihayashi8769]

Honestly, better tutorial than a Bootcamp I paid for... shockingly great. Thanks, Ninja!

[@castlemoyle]

WOW! This is great. I've got a site with about 25-30 pages on it that I've wanted to expand. Except then I'd have to update the menu structure every time I added a new page. Instead, I can just create a .js file with the menu code in an html template and by adding two lines (one that an empty div to hold the menus and the other a link to the js src), all I have to do is update the javascript and it gets reflected everywhere. COOL!

[@yawmanuel9758]

Done watching all the six vids, and this is the best javascript video i hv ever watched. Legend!

[@Ali-vz9rs]

You have no idea how much I appreciate your work. Thank you Shaun.

[@user-qe7xn9vv2o]

OMG i love this. I never comment on videos but after watching this 4 years later and i can say this is gold. I wish i had money for the full course though

[@merimagdi]

After finishing the whole JS playlist, I just bought the full course. I wasn't sure about it because my mother language isn't English, but you explain it so clear that it is very easy to understand it all. Thank you so much for the quality of your "teaching". See you there Shaun!

[@NetNinja]

Awesome! Glad you are enjoying the course, thanks for buying it :)

[@AnuragSingh-cd7tt]

I have come across many udemy courses and youtube tutorials but net ninja is by far the best! He just gets you hooked on "studies!"!!

[@yangzheng9581]

Just finished this course! It was great as usual when it is done by the net ninja ! Thanks again for the great effort.

[@massivewon]

Excellent course! Looking at all of your content, you are one of the best teachers I've ever had. And that's after having been through university lol. Force be with you always.

[@NetNinja]

Thanks, that means a lot :)

[@zero_cool1219]

I've been watching your videos and they have been great. Everything leading up to here (HTML, CSS and now this) have been some of the best online tutorials I've seen. However for the first time I find myself a little lost. The examples here are well done, I just don't know why anyone would ever use these queries when you can simply change the html file? If anyone reading this provide a real world example or further clarify the why, it would be greatly appreciated. Thanks!

[@license2Bort]

This is the best DOM video I have seen. Thank you so much!

[@SuperDali4]

This series has a fantastic overview over the JavaScript topics. Big recommendation 🔥

[@SUR-MEDIA-xc2cd]

Really amazing tutorial. I learned a lot of things, and it cleared all of my confusions, I must thank you for such tutorials, All because of you I fell in love with programming and coding, thanks again, wishing you all the best and the path of eternity.

[@NetNinja]

Waking up to a comment like this is what it's all about, thank you so much for your kind words! :) glad it helped.

[@SUR-MEDIA-xc2cd]

Your concern for us shows your kindness, A lot of people lack such emotions(such as kindness), thanks for such a beautiful comment for your student, again wishing you all the best and the path of eternity @@NetNinja

[@mrjh8467]

I can't believe I only found your channel just days before my exams. Better late then never!

[@viber6248]

Thank you so much for the course. As a university student, this helps a lot🙌🏼

[@NetNinja]

Happy to hear that! :)

[@ritjoshi6155]

Thanks Shaun for these course, I wish you all the very best, love from INDIA ♥

[@NetNinja]

[@watchanimes9365]

I'm very tankful for this course I learned what I did not in the last years in the classroom ty man ty.

[@NetNinja]

That's great to hear, thanks Watch!

[@elusariosinnombre2058]

Best DOM manipulation guide I've found yet!

[@user-xd2oz3vn2b]

Thanks a lot for this video series. I have been using JS for about six years, but I couldn't understand some simple things until watching these videos.

[@mohamedamarfilali]

Thank you shaun, this is the best javascript course and i've tried a lot, I just bought the udemy course, and thank you for the other courses.

[@NetNinja]

Thanks so much for buying the course, hope you enjoy it! :)

[@oghenekevweokorosobo8156]

You made javascript easy to learn,...... I’ve come a long way from mimo down to SoloLearn to freecodecamp to a free trail of Team Treehouse and none of them explains in Dept like you do...I so love your teaching and I would by Gods grace buy your course at Udemy...

[@kunkr1978]

Thank you for this free tutorial series, it has helped me A LOT. I have watched and gone through other JS tutorials, but none have really expressed the interactivity as you did in this video. I will be taking your Udemy course in the near future and will be recommending these videos to anyone interested in learning JS. Thank you, keep doing what you do, you're great at it!

[@NetNinja]

Thanks so much :)

[@patrickknows2296]

This is the day I fully understand the DOM. Thanks Ninja

[@chinedujonathan4238]

Thank you for the opportunity to learn the basics of JavaScript. I feel powerful already 🙂

[@tayfun6378]

well I've been dealing with vanilla js and react for a couple of months now but I've decided to reinforce my JS skills from the scratch and started watching this series just because it's from Shaun. and as I guessed beforehand, this now let me to buy the follow up course on Udemy. man I feel like a bot who propagates an ad :D this is real word of mouth.

[@NetNinja]

Thank you! Hope you enjoy :D

[@jbrenes]

Amazing class and series! I learned a lot. you have a gift for teaching dear sir.

[@imenenasri8739]

Thanks a lot for this serie. I like your way of teaching. I think your videos are the best ever for someone who doesn't have basics in programing languages.

[@pankajwadhawan1551]

HI Shaun, Thanks for this JavaScript series. It is really helpful. Easy to map all the concept in mind with the help of your teaching. I learned so much. Looking forward to buy your udemy full course.

[@NetNinja]

Thanks so much, the discount is auto applied in the link below :) www.thenetninja.co.uk/udemy/modern-javascript

[@BizzaroBrainBoi]

I just finished the course! IT WAS EXCELLENT! THANK YOU!

[@NetNinja]

You're very welcome! :) glad it helped. Thanks for watching!

[@InnoTechWorld]

Thank you so much you've made me love JavaScript

[@blitzgaming2771]

This is the best DOM tutorial. Thank you very much!

[@NetNinja]

You're very welcome! :)

[@marakeshg8112]

I don't think I've ever learned so much, so easily! I'll be looking into your udemy course. Thank you!!!

[@inka7961]

Wow, I wanted more by the end of #6 and I purchased Udemy to continue. This is probably the only online course that kept my attention from the beginning till the end, and probably the only I will actually finish without skipping! From someone who is studying web dev atm (JS, React..) I can say, YOU ROCK

[@NetNinja]

Thanks so much for buying the course! In the future, for sure, there will be React! :).

[@thekuzicartoon]

completely agree 100%!

[@darrylbrian]

lorem error ipsum lorem success ipsum lorem ipsum lorem lorem ipsum success error lorem ipsum lorem ipsum lorem lorem ipsum error success lorem ipsum

[@feng282]

thankyou

[@vangiangang950]

I eventually finished the course. Although I know this series only includes very basic of JS, I learnt many new things, thank you for your work.

[@NetNinja]

Glad it was helpful! :D

[@ufyohwo3613]

Thank you so much for this playlist! I learnt a lot. You are an amazing teacher.

[@NetNinja]

Glad it was helpful! :) thanks for watching

[@aurelienbaraka2527]

Tu es seulement le meilleur The Net Ninja. You are the best of the best, le top de top, la crème de crème.

[@christiananjemo9047]

Just finished these 6 chapters. Thanks a lot, this is really awesome and I just bought your udemy course!

[@NetNinja]

Awesome, thank you! I hope you enjoy it :D

[@disnelson308]

Please post the remaining sections. This is easily the best Javascript tutorial on the planet. End of story...

[@luisalbertoluft5306]

Thank you for all the amazing tutorials! As a self taught developer your videos have helped me a lot!

[@muhammadyusoffjamaluddin]

The quiz was like... Teacher hiding something easy from us and use it. Nice, you guys need to watch till the end actually.

[@alexanderchamwada9522]

This is the best javascript tutorial i came across.I learnt a lot.Thank you a million times.

[@NetNinja]

Thanks so much :)

[@israimovich]

Amazing tutorials, watching the Net Ninja since 2018

[@yinonb172]

Best JavaScript Tutorial, I bought the full course and it is excellent ! , Arrigato Net Ninja San !

[@judisjeevan4908]

You are the real net ninja !!!! Thank you very much Shaun..

[@jjspelman]

Great stuff. As soon as we started manipulating html and css I was hooked. Just purchased the course. Looking forward to the projects/apps to build Thanks!

[@NetNinja]

Awesome, thanks so much, hope you enjoy it :D

[@SJ-qm5fv]

Thank you so much for these tutorials. Beyond helpful! Can't believe I learned so much. Just purchased your Udemy Course, can't wait to dive in!

[@NetNinja]

Awesome thank you so much :)

[@hamzavictor2385]

I appreciate your tutelage Shaun. My very lengthy road of getting to the solution. const paras = document.querySelectorAll("p"); paras.forEach(para=>{ let list = para.innerText.split(" "); for(let i = 0; i

[@eugenevk23]

What a great teacher Shaun isLove his sense of humor as well

[@vinceluzon]

Thank you The Net Ninja. Finally, I fully understand Javascript!

[@markopanger412]

I'm a complete novice in JS and wanted to learn the "net" technologies/languages that it takes to build a web app for my little project. I came across Shaun and I can only say the tutorials are spot on, with just the right pace, entertaining, not monotonic at all and very easy to understand. I''m buying this on udemy 101% and would buy something similar (from novice to ninja) for Bootstrap, node.js and some kind of database as well; sure provided querrySelector('.author') === Shaun ;)

[@NetNinja]

Thanks so much, if you need a discount code for the course, follow this link: www.udemy.com/course/modern-javascript-from-novice-to-ninja/?couponCode=NINJAYT20

[@codewithbishal895]

literally the best javaScripy ninja

[@MsLiberanimus]

thanks for this course, it means world to me :D you are great teacher!

[@NetNinja]

Thanks Tamara, you're very welcome!

[@LadybugNinja0]

I really love your teaching style and have been following your other playlists. But in this video, after adding the Net Ninja website as the href attribute I actually decided to follow the link and a couple of click later I've bought and am following your full JS course. Sneaky advertising! But I don't regret the purchase.

[@NetNinja]

Awesome, thanks so much!

[@imaginamais4481]

I brought this course right now and I'm SOOOOOOOOOOOOOO excited to start! :)

[@joshuajurado2565]

Hey Shaun! Are you going to make a React course on udemy?

[@gamester7152]

thank you so much for tutorial bro. this is best tutorial for javascript i ever had.

[@rebei]

Amazingly fun and insightful, javascript is not so scary anymore.

[@NetNinja]

Great to hear :D

[@haneen4husseen821]

Really helpful video. It helped me finishing my assignment. Thanks

[@GeefeAlba]

This always confused me. Thank goodness I found your tutorial!❤ My friends recommended you on Twitter.❤

[@callmeFernie]

Shaun said querySelectorOOH LOL bro this tutorial was so helpful and easy to follow. Your teaching method is excellent!

[@NetNinja]

Thank you 😃

[@DmitryPopovFreeWind]

Thanks again! I bought the course without any doubt!

[@mydev8669]

Hi Shaun, I have finished the 6th tutorial of your brilliant 1-6 free series. I have learnt A LOT and I am sooooo so so so so happy. (I should have made a loop here to print "so" 100 times. I am now looking to continue your course on Udemy (I have just bought it!) and have some questions: a) Where exactly (what lesson) should I continue? --> "Forms & Form Events"? b) Will I be missing something from the lessons prior to "Forms & Form Events"? Thank you very much! I am looking for your advise to continue on Udemy after the 6th free youtube tutorial. Kind regards. Ted

[@johnconnor9787]

Hi Ninja!) I just bought your course. Actually this is a first ever think I bought online)

[@NetNinja]

Awesome, thanks again!

[@xmabel]

Same here.

[@johnconnor9787]

@Trillion Air my applause

[@Neryos]

Thx a lot mate. Now moving to your React course. Great content and explanation !

[@Cricupdates-yz5dp]

Thanks a lot I finished the entire playlist and it is gold. plz upload more videos

[@srinivasaraoyp3640]

Very interesting topic on DOM manipulation. Thank you.

[@NetNinja]

Very welcome :) thanks for your comment

[@yangzheng9581]

great effort that you had paid off, millions thanks Shaun !

[@johnk7420]

Great teacher great tutorials congrats!!

[@NetNinja]

Thanks John!

[@hsumyat1265]

Your videos are really helpful! Thanks alot 🙂

[@DragonwingZify]

My assignment based on challenge was this: //loop through p tags const content = document.querySelectorAll("p"); content.forEach((pTag) => { // add new variable that have keywords success or errors let text = pTag.innerText; // console.log(text ); if (text.includes("error")) { pTag.classList.add("error"); } else if (text.includes("success")) { pTag.classList.add("success"); } else { pTag.style.color = "orange"; pTag.style.border = "1px dotted"; } }); After looking at the solution I could see that I could've cut some code, but I managed to do the assignment which I was proud of. Thanks for giving out those really useful resources out on the internet for free Shaun, I really appriciate it a lot!

[@russelldriver6394]

You absolute legend, thanks so much for all your videos!

[@Fibr3Optix]

Just so you know. IF you make your JS script external and are getting null errors in console, link ( tag) it at the bottom before the tag.

[@oussamaboumhaout3619]

you impress me more and more ! thank you for your ninja services .

[@catamazing2171]

I'm glad I found this video , thank you.

[@channel_2000]

The only video I found that truely shows the way to connect javascript with html. Thanks a lot man !! (Given that you know the basics of html, css selectors and javascript) Any discount for the full course soon?

[@kuyaq8544]

these videos are so clutch javascript down , node and express next thx

[@liabutlermedina3349]

I love your tutorials, thanks a lot :)

[@charlesmontojo3960]

Awesome! The full udemy course do they have really advance topics? Or only made for complete beginners? I’m someone who already use js frameworks but wanna level up more my vanilla JS specially from u :)

[@ss-lk2rs]

I am sure that at the end of the course I will fall in love with Javascript. All thanks to you. Just wanted to confirm if the projects and the firebase part is up to date before buying the course?

[@adelsafi1581]

one of the best javascript course, tanx a lot

[@its_just_me_]

Hello Shaun!! Thank you for the discount, I've purchased this course on Udemy for only ₹360(INR). Love from India🇮🇳

[@NetNinja]

Awesome! Thank you and I hope you enjoy it 😊

[@its_just_me_]

@@NetNinja Yes master!! 😉

[@ranjithak4325]

Done with the free course in youtube taking the udemy course i like your teaching style.

[@NetNinja]

Awesome, thank you! Hope you enjoy! :)

[@ranjithak4325]

So far so good :) I will let you know how did it go 👍🏼

[@malcolmcolindixon]

Thanks Shaun for this great intro, I'd really love to follow up with the Udemy course soon (costs more now though) as it looks like there's some great content and you're teaching style is excellent and nicely paced. BTW your website needs the copyright date updated, maybe use Javascript to do that automatically ;-). UPDATE: Bought the course, price came down and I think I've had enough free courses from you so it was about time I gave you something for your hard work.

[@annie4969]

I’ve been thinking of buying the course after finishing this video later today, how did you end up finding it? Was it worth the money?

[@malcolmcolindixon]

@@annie4969 I deleted my first reply as I forgot I did actually buy the course ( I didn't read my full comment doh!). I paid £11.99 for it and I was extremely happy with the course and learned loads. I gave it a 5 star rating too. You can tell that it's an excellent course based on the number of students that have ranked the course so highly.

[@roshanmenuka7651]

Another superb content on youtube. ❤️