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

[@garymathe9863]

This guy is criminally undersubscribed.

[@bmehder]

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

[@ColorCodeio]

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

[@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 🤘👨‍💻🔥🎉

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

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

[@nancychaudhry3623]

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

[@ColorCodeio]

Thank you! Good to be back.

[@zhiend3935]

Your videos deserves much more than 5k

[@iambestin]

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

[@ColorCodeio]

Ty! Good to be back.

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

[@web-sd9be]

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

[@ColorCodeio]

You are most welcome

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

[@adam29334]

good to see you back dude!

[@ColorCodeio]

Thanks!

[@pzpalasti]

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

[@ColorCodeio]

Thank you too!

[@keshavakumar9828]

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

[@ColorCodeio]

Thank you!

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

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

[@fasteditsyt]

My brain is so big now! TY

[@ColorCodeio]

👍🏼🧠

[@jollyren]

I'm sooooo happy you made another video

[@ColorCodeio]

Me too! More coming soon.

[@shonuff4323]

Love your lessons!

[@ColorCodeio]

Thank you! 😃

[@francesko1763]

ColorCode is alive!!

[@ColorCodeio]

Hell yeah 👍

[@Wakkyguy]

Have been missing the fun for a while!

[@ColorCodeio]

Fun is. back!

[@Wakkyguy]

@@ColorCodeio ♥

[@javeedakhter324]

Was waiting from a long time🎉

[@ColorCodeio]

The wait is over!

[@shan_arosh]

glad you're back

[@ColorCodeio]

That's right!

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

[@fernandodasilvagomes7905]

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

[@ColorCodeio]

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

[@priyanshuagrawal9204]

Finally after such a long long time 🎉🎉❤❤

[@ColorCodeio]

🕺🏻

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

[@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!😊🙌

[@2difficult2do]

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

[@ColorCodeio]

✊

[@scottldn]

Good to see you back 💪

[@scottldn]

And congratulations 🥂 !

[@ColorCodeio]

Thank you

[@dios8256]

Some very nice special effects in this video 🤩

[@ColorCodeio]

🙏

[@JeetKRamnani]

Miss you sir ❤ finally back with Js and humour ❤

[@haallefs]

Thanks for this fantastic content! 😊

[@ColorCodeio]

Thanks for this fantastic comment

[@G_Breaker]

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

[@harvard004]

Welcome back!!!!

[@SK4-music]

omg this course is just flames 🔥

[@ColorCodeio]

🔥

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

[@anthonytirop1338]

incredible session

[@ColorCodeio]

Thanks Anthony

[@jasvindersingh6915]

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

[@ColorCodeio]

Happy to hear that!

[@AlAminKhan03]

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

[@ColorCodeio]

👍♥️

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

[@beinyourguard]

happy for your lessons and congrats on your marriage!

[@ColorCodeio]

Thank ya!

[@karthiktalam]

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

[@user-mw5bm2xh9x]

thanks for the lesson

[@ColorCodeio]

Thanks for watching

[@6.squash.936]

Return of the King

[@ColorCodeio]

Too kind 👊♥️

[@federexpotolin6284]

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

[@carljung2850]

this is freaking great

[@ColorCodeio]

Thanks!

[@chhavimanichoubey9437]

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

[@ColorCodeio]

Excellent!

[@kamil4351]

nice to see you again :)

[@ColorCodeio]

Thank you!

[@mrlunatic2022]

Finally 😭😭, your back sir ...

[@ColorCodeio]

Glad to be back

[@mohammadkhakhsoor2068]

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

[@maremare281]

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

[@ColorCodeio]

🙏👍

[@hcw1566]

U R BACK~~!!

[@ColorCodeio]

Hell yeah! ✊

[@sujith.m.s4041]

Hope your lifes going good, love ur content btw

[@ColorCodeio]

Thank you very much!

[@Nathaniel_Cos]

Thanks for useful staff

[@prachimagdum9213]

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

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

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

[@Yardan_gholi]

is it better to select base on class or id's or data-set ?

[@solide_ahmed7907]

geat video really enjoyed it !!

[@ColorCodeio]

🙏

[@valenciawalker6498]

Thank you!

[@ColorCodeio]

♥️

[@valenciawalker6498]

@@ColorCodeio 🤍🤍

[@hooman_talakian]

Amazing Content 🏆

[@ColorCodeio]

Appreciate it

[@xviewmytubex]

Learning from your video! You got merch? =)

[@ColorCodeio]

Yep ColorCode.io

[@hossainehsani5696]

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

[@dennisbunarta1190]

Finally!!!!

[@SwaggerUi]

Congrats 🎉🎉

[@ColorCodeio]

Thank ya!

[@AnupKumar-td9fw]

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

[@ColorCodeio]

🙏

[@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 = '';

[@joyguy_]

Finally back

[@ColorCodeio]

Hell yeah ✊

[@rmrtamiltechnology]

Thank you sir

[@ColorCodeio]

You're welcome

[@rmrtamiltechnology]

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

[@jimmyhou3729]

wow you are back

[@ColorCodeio]

That's right!!!

[@isaccosta1744]

come back, please! Hug from Brazil

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

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

[@capybara0612]

Welcome back

[@ColorCodeio]

Ty!

[@aminkhakzad9257]

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

[@ColorCodeio]

Merci 🙏

[@idprompt]

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

[@ColorCodeio]

Yes! Good eye

[@yendys74]

Lovely

[@saferforenvironment5850]

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

[@ColorCodeio]

Hello Nepal

[@WebSurfingIsMyPastime]

liked, commented, subscribed!

[@ColorCodeio]

Welcome aboard!

[@malavipande6693]

Bose is back 🤠

[@WaliaIbex]

Awesome guy where are the remaining 5 ?😊

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

[@ShivamSharma-dq4pu]

I love you man

[@ayyubs_mind]

Wooooww🎉🎉🎉🎉

[@kazikmajster5650]

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

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

[@undergraduate6050]

How's it inefficient with memory management?

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

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

[@roysonkewalfernandes3061]

can u teach about Javascript Enum ?

[@Yardan_gholi]

why did you put null as the first argument of bind and after that li ? what not just bind(li) ?

[@ColorCodeio]

The first argument passed to bind is the this keyword which we don't need in this example. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

[@TicTacTechYT]

MAKE MOre videos. We miss you

[@erensametkaratas6593]

WOW. Are we back?!?!

[@ColorCodeio]

We're back!