DOM API - JavaScript Tutorial for beginners

JavaScript DOM API, what it is, how to use it, and why use it at all?! It's used by ReactJS, AngularJS, VueJS, jQuery, and most other JS libraries to manipulate the DOM.
This is episode 15 of 20 things Javascript Developers Should Know But Probably Don't.
00:00:00 Intro
00:01:47 What is the DOM API?
00:03:52 Setup
00:04:36 Document interface
00:05:40 Click eventListener
00:06:30 Head, Body and Children
00:08:15 Add new Elements
00:12:50 Add dynamic date
00:15:00 To Do App
00:21:55 Semantic HTML
00:26:50 Remove Elements
00:31:55 Styling & Attributes
00:35:00 Add new Attributes
00:36:30 Query the DOM
00:39:43 Summary
00:41:15 Outro
ColorCode Etsy Merchandise store:
www.etsy.com/shop/ColorCodeStore
DOM API (MDN):
developer.mozilla.org/en-US/d...
Full playlist here: • 20 Things JavaScript D...
JavaScript Promises from the series "20 Things JS Developers Should Know but Probably Don't"
by ColorCode.io, Sina Jazayeri
** Announcement **
Full JavaScript Mastery course is coming! Details at the end of the video. Sign up for Early Access here:
www.colorcode.io/js-mastery

[@bmehder]

Quality over quantity. I have watched all these videos multiple times.

[@ColorCodeio]

Thanks brother! Nice to see you in the comments section again :)

[@garymathe9863]

This guy is criminally undersubscribed.

[@mohammadabbas1623]

I'm so happy that you are back sir . now just cover all 5 remaining topics quickly 🙏

[@ColorCodeio]

Of course! 👊

[@aziskgarion378]

I just discovered this channel and was watching videos from last year. Didn't realize there was a fresh video from a week ago. Amazing job. Keep doing it. Till 20!

[@ColorCodeio]

Hell yeah! More vids coming soon

[@ColorCodeio]

Episode 15: The DOM API 🤘👨‍💻🔥🎉

[@ciprianparaschiv7591]

Yo, thanks for this and the whole series. It's super useful. This vid in particular I really wished I had it a couple of months ago. Had to discover most of this by trial and error. Great content!

[@ColorCodeio]

Glad to hear it!

[@billymaaa]

Best js tutorial on youtube! I love how you make every second so entertaining and easy to digest! Keep up the amazing work and I can't wait for your future videos, podcast, and mastery course!

[@ColorCodeio]

Thanks so much Billy. Made my day.

[@nancychaudhry3623]

Wow! Great to have you back and another great video!

[@ColorCodeio]

Thank you! Good to be back.

[@thesaqlain]

Hats off to you... your teaching style and how you present the scenario is literally .... i mean i have no words to describe it

[@user-is8yk4iq7f]

I have the perfect playlist on my collection appreciate your contribution sir

[@user-oz3xy9th3u]

i'm so glad you're back! thank you so much! id really appreciate it if you make a video on ES6 modules

[@ColorCodeio]

Good idea

[@iambestin]

Missed your videos for quiet a longtime. Great your back :)

[@ColorCodeio]

Ty! Good to be back.

[@web-sd9be]

One of the best channels for programming hands down. Thank you very much sir. :)

[@ColorCodeio]

You are most welcome

[@zhiend3935]

Your videos deserves much more than 5k

[@pzpalasti]

Congrats!!! 🎉 and thank you for the new video!!

[@ColorCodeio]

Thank you too!

[@adam29334]

good to see you back dude!

[@ColorCodeio]

Thanks!

[@opencode1]

Thnx God i have my notification open for you. Looooooooooove it haha i was going back to prototype 3 days ago

[@ColorCodeio]

You won't have to wait along anymore :) I'm back!

[@opencode1]

You are an amazing teacher. Welcome Baaaaack @@ColorCodeio

[@hanshochbaum4335]

Hello Sina, I'm in a 3 year computer Science course and because of your content I have a deeper understanding of JavaScript's internal framework. Thanks, Al

[@ColorCodeio]

Glad to hear it!

[@12345678uygfcxdrtghn]

Good tutorial, awesome quality/editing as always, little more beginner friendly (most JS devs probably know that already). Say hi to Quoli! Ciao!

[@ColorCodeio]

Thanks, will do!

[@javeedakhter324]

Was waiting from a long time🎉

[@ColorCodeio]

The wait is over!

[@jollyren]

I'm sooooo happy you made another video

[@ColorCodeio]

Me too! More coming soon.

[@G_Breaker]

I love your approach of teaching ,You will hit that 1M in no time

[@shonuff4323]

Love your lessons!

[@ColorCodeio]

Thank you! 😃

[@fernandodasilvagomes7905]

Mesmo com dificuldade de entender o ingles, amo seus videos! continue

[@ColorCodeio]

Great!

[@keshavakumar9828]

It's good to see you back. KZbin lacks quality which you give us.

[@ColorCodeio]

Thank you!

[@dios8256]

Some very nice special effects in this video 🤩

[@ColorCodeio]

🙏

[@federexpotolin6284]

your content is very helpful to me. Please continue to make more videos like this. And use real life example

[@shan_arosh]

glad you're back

[@ColorCodeio]

That's right!

[@priyanshuagrawal9204]

Finally after such a long long time 🎉🎉❤❤

[@ColorCodeio]

🕺🏻

[@Wakkyguy]

Have been missing the fun for a while!

[@ColorCodeio]

Fun is. back!

[@Wakkyguy]

@@ColorCodeio ♥

[@harvard004]

Welcome back!!!!

[@jasvindersingh6915]

Thank you for these videos sinaaaa😅, learnt alot . Looking forward to get more fundamental JS videos 😊

[@ColorCodeio]

Happy to hear that!

[@chhavimanichoubey9437]

Congratulations to you sir, and congratulations to me (because your js videos helped me understand js).

[@ColorCodeio]

Excellent!

[@scottldn]

Good to see you back 💪

[@scottldn]

And congratulations 🥂 !

[@ColorCodeio]

Thank you

[@haallefs]

Thanks for this fantastic content! 😊

[@ColorCodeio]

Thanks for this fantastic comment

[@DevlogBill]

ColorCode, welcome back! Watching your videos, I always pull out the notepad and pen and take plenty of notes! I always learn a lot from you, thank you. Question? Is there any relation between you and the other KZbinr "The Coding Train"? You both have somewhat similar styles in teaching and great humor.

[@ColorCodeio]

No relation, but he's great

[@freakymickey]

At first, I thought you are kindda overdoing the act, But later I found you and your teaching AMAZING than any other people out there. I mean it. Wish to have you in my contact list.❤🔥

[@mohammadkhakhsoor2068]

Wooow , sina Finally you came back Im here to say a big hello to Qoli

[@prachimagdum9213]

Please make a playlist for beginners javascript.... U are a great teacher and want to learn more.. From u Thanku for this playlist ❤

[@anthonytirop1338]

incredible session

[@ColorCodeio]

Thanks Anthony

[@2difficult2do]

It's good to see and hear you again. ☝️😼👍

[@ColorCodeio]

✊

[@affanahmed2897]

Hello Sina! I'm thrilled to be your new student from Pakistan. I recently watched your fantastic video on Asynchronous JavaScript, and it really helped clear up some of my concepts. I'm so thankful for that! As a newcomer, I've noticed that some developers use the 'const' keyword, while others use the 'function' keyword when creating functions. I'm a bit confused about which one to use. Does it depend on specific conditions or circumstances? Your guidance would mean a lot to me. I'm really excited to learn from you!😊🙌

[@kamil4351]

nice to see you again :)

[@ColorCodeio]

Thank you!

[@Nathaniel_Cos]

Thanks for useful staff

[@user-mw5bm2xh9x]

thanks for the lesson

[@ColorCodeio]

Thanks for watching

[@hooman_talakian]

Amazing Content 🏆

[@ColorCodeio]

Appreciate it

[@petesampras2611]

Great videos. If/when you do have time, perhaps you can do a video that walks users through actual websites, and where JS comes in. More like a case study with illustrative examples. Thanks for spending time and posting highly useful content.

[@ColorCodeio]

I think that’s a great suggestion

[@fasteditsyt]

My brain is so big now! TY

[@ColorCodeio]

👍🏼🧠

[@SK4-music]

omg this course is just flames 🔥

[@ColorCodeio]

🔥

[@JeetKRamnani]

Miss you sir ❤ finally back with Js and humour ❤

[@AlAminKhan03]

So good to see you , Please be regular with us😭

[@ColorCodeio]

👍♥️

[@solide_ahmed7907]

geat video really enjoyed it !!

[@ColorCodeio]

🙏

[@aminkhakzad9257]

آقا خیلیم عالی و قوی دمت گرم ❤

[@ColorCodeio]

Merci 🙏

[@hcw1566]

U R BACK~~!!

[@ColorCodeio]

Hell yeah! ✊

[@AugustineGodwin-oj4yu]

I have never understood any programmer Like the way i understood ur tutorials i will be happy if you can do a tutorial on destruction operator and related

[@ColorCodeio]

Glad to hear it

[@carljung2850]

this is freaking great

[@ColorCodeio]

Thanks!

[@francesko1763]

ColorCode is alive!!

[@ColorCodeio]

Hell yeah 👍

[@maremare281]

Sina nice job 😎 💥🤘🙌 like it a lot :)

[@ColorCodeio]

🙏👍

[@6.squash.936]

Return of the King

[@ColorCodeio]

Too kind 👊♥️

[@karthiktalam]

You are awesome dude. With playback speed 1.75x, ur voice is crystal clear and completed the video in around 25 mins😆

[@saferforenvironment5850]

Thankyou for this video Love from nepal 🇳🇵 Keep shining keep sharing 😊 Ps: You have got a subscriber 🎉

[@ColorCodeio]

Hello Nepal

[@sujith.m.s4041]

Hope your lifes going good, love ur content btw

[@ColorCodeio]

Thank you very much!

[@SwaggerUi]

Congrats 🎉🎉

[@ColorCodeio]

Thank ya!

[@jaafarassaf9986]

Really great videos enjoying them so far, Thank you :) ! If I may ask how is the button triggered onsubmit if it does not have a submit role ?

[@mrlunatic2022]

Finally 😭😭, your back sir ...

[@ColorCodeio]

Glad to be back

[@hossainehsani5696]

I can't wait for the day when you have React courses somewhere. I would kill for it.

[@kazikmajster5650]

Why do you work with the console? I want to use it for my file and now I am confused.

[@valenciawalker6498]

Thank you!

[@ColorCodeio]

♥️

[@valenciawalker6498]

@@ColorCodeio 🤍🤍

[@joyguy_]

Finally back

[@ColorCodeio]

Hell yeah ✊

[@jimmyhou3729]

wow you are back

[@ColorCodeio]

That's right!!!

[@hanshochbaum4335]

I do have a question for you. When removing elements from the HTML-Markup what is the best practice for doing this? Example 1: let tHeadTag = document.getElementById("table_header"); while (tHeadTag.hasChildNodes()) { tHeadTag.removeChild(tHeadTag.firstChild); } or Example 2: let tHeadTag = document.getElementById("table_header"); tHeadTag.innerHTML = '';

[@AnupKumar-td9fw]

The only one word after watching --- Amazing ❤❤

[@ColorCodeio]

🙏

[@beinyourguard]

happy for your lessons and congrats on your marriage!

[@ColorCodeio]

Thank ya!

[@capybara0612]

Welcome back

[@ColorCodeio]

Ty!

[@xviewmytubex]

Learning from your video! You got merch? =)

[@ColorCodeio]

Yep ColorCode.io

[@xkabuto]

This guy's drip is so outstanding that it makes me pay absolute attention to the video even when it's just him taking a break to drink water

[@ColorCodeio]

I’m not cool enough to know what drip means but thank you :)

[@idprompt]

¿Does the picture on your wall is the album cover "The best of sade"?

[@ColorCodeio]

Yes! Good eye

[@yendys74]

Lovely

[@WebSurfingIsMyPastime]

liked, commented, subscribed!

[@ColorCodeio]

Welcome aboard!

[@dennisbunarta1190]

Finally!!!!

[@rmrtamiltechnology]

Thank you sir

[@ColorCodeio]

You're welcome

[@rmrtamiltechnology]

@@ColorCodeio sir, how can i get javascript mastery course from colorcode ?

[@wasimrafik3535]

after 7 months waited for a very long and I hope you complete this series soon next episode will not take another 7 months to appear

[@wasimrafik3535]

the above comment was before watching your complete video so excuses

[@kooroshirani]

درود برشما با این ویدیو های با کیفیت و خوبتون یه سوال بنظر شما بنده اگر ازفرانت اند به ماشین لرنینگ و دیتا ساینس سوییچ کنم آینده کاری بهتری داره ؟ لطف میکنید پاسخ بدید

[@ShivamSharma-dq4pu]

I love you man

[@ayyubs_mind]

Thank you bro. I find job with your help 😢

[@jayteecollins1279]

your videos are really so good! i just subscribed yesterday 😀 may i know how you inserted cucumber icon in console?

[@malavipande6693]

Bose is back 🤠

[@WaliaIbex]

Awesome guy where are the remaining 5 ?😊

[@isaccosta1744]

come back, please! Hug from Brazil

[@undergraduate6050]

How's it inefficient with memory management?

[@user-es2vr3cv1v]

❤ can you make a video about Event loop and browser api, call stack and callback queue ( also interesting to know how it works )

[@shameer9680]

Thanks for this. Really great content. Btw what is kabab case 👼 (33:04)

[@mahtabvariyani]

Thanks for the videos AND 😁 You still don't have any videos about hoisting in JavaScript (as i watched them all). Could you consider making your next video about it?

[@ColorCodeio]

Yes, soon

[@shady5063]

When you have the time, can you show us how you setup your IDE the background color and design. Is that the browser being open in the terminal ? Pls make a video showing us how to get that nice looking IDE.

[@ColorCodeio]

It's called RunJS: runjs.app/colorcode

[@erensametkaratas6593]

WOW. Are we back?!?!

[@ColorCodeio]

We're back!

[@nicolasseydoux5985]

Around 21 minutes , one thing you show unvoluntarily, is that you can put multiple same events on a same div . your wrote the event 'click' with a console.log . Your seemed to rewrite that click event with the nicely todo list working . testing it trigger what supposed to happen - copy the input text, putting it in the list, but also... the console.log !! . To summarize, you created 2 'clicks' events ! .

[@ColorCodeio]

Good catch!

[@TicTacTechYT]

MAKE MOre videos. We miss you

[@CodeWithBehram7497]

I recently started watching your videos and also The way you teach is awesome. You deserve a Sub and you earned it. ❤ But i also request you to start a series on Php...

[@ColorCodeio]

Thanks and welcome

[@mariyanyordanov5174]

🙃 hi Sina, make episod for CORS, please

[@ayyubs_mind]

Wooooww🎉🎉🎉🎉