DOM API - JavaScript Tutorial for beginners
HTML-код
- Опубликовано: 2 июн 2024
- 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 
Наука
Quality over quantity. I have watched all these videos multiple times.
Thanks brother! Nice to see you in the comments section again :)
This guy is criminally undersubscribed.
I'm so happy that you are back sir . now just cover all 5 remaining topics quickly 🙏
Of course! 👊
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!
Hell yeah! More vids coming soon
Episode 15: The DOM API 🤘👨💻🔥🎉
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!
Thanks so much Billy. Made my day.
Wow! Great to have you back and another great video!
Thank you! Good to be back.
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!
Glad to hear it!
One of the best channels for programming hands down. Thank you very much sir. :)
You are most welcome
Missed your videos for quiet a longtime. Great your back :)
Ty! Good to be back.
Your videos deserves much more than 5k
i'm so glad you're back! thank you so much! id really appreciate it if you make a video on ES6 modules
Good idea
Congrats!!! 🎉 and thank you for the new video!!
Thank you too!
Good tutorial, awesome quality/editing as always, little more beginner friendly (most JS devs probably know that already). Say hi to Quoli! Ciao!
Thanks, will do!
good to see you back dude!
Thanks!
I have the perfect playlist on my collection appreciate your contribution sir
Thnx God i have my notification open for you. Looooooooooove it haha i was going back to prototype 3 days ago
You won't have to wait along anymore :) I'm back!
You are an amazing teacher. Welcome Baaaaack @@ColorCodeio
Hats off to you... your teaching style and how you present the scenario is literally .... i mean i have no words to describe it
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
Glad to hear it!
Was waiting from a long time🎉
The wait is over!
It's good to see you back. RUclips lacks quality which you give us.
Thank you!
I'm sooooo happy you made another video
Me too! More coming soon.
Have been missing the fun for a while!
Fun is. back!
@@ColorCodeio ♥
Mesmo com dificuldade de entender o ingles, amo seus videos! continue
Great!
Some very nice special effects in this video 🤩
🙏
Finally after such a long long time 🎉🎉❤❤
🕺🏻
glad you're back
That's right!
Love your lessons!
Thank you! 😃
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 RUclipsr "The Coding Train"? You both have somewhat similar styles in teaching and great humor.
No relation, but he's great
It's good to see and hear you again. ☝️😼👍
✊
Good to see you back 💪
And congratulations 🥂 !
Thank you
I love your approach of teaching ,You will hit that 1M in no time
آقا خیلیم عالی و قوی دمت گرم ❤
Merci 🙏
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.❤🔥
Thanks for this fantastic content! 😊
Thanks for this fantastic comment
nice to see you again :)
Thank you!
Welcome back!!!!
Thank you for these videos sinaaaa😅, learnt alot . Looking forward to get more fundamental JS videos 😊
Happy to hear that!
Congratulations to you sir, and congratulations to me (because your js videos helped me understand js).
Excellent!
My brain is so big now! TY
👍🏼🧠
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!😊🙌
Wooow , sina
Finally you came back
Im here to say a big hello to Qoli
So good to see you , Please be regular with us😭
👍♥️
Thanks for useful staff
Miss you sir ❤ finally back with Js and humour ❤
incredible session
Thanks Anthony
U R BACK~~!!
Hell yeah! ✊
omg this course is just flames 🔥
🔥
your content is very helpful to me. Please continue to make more videos like this. And use real life example
Amazing Content 🏆
Appreciate it
this is freaking great
Thanks!
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.
I think that’s a great suggestion
ColorCode is alive!!
Hell yeah 👍
You are awesome dude. With playback speed 1.75x, ur voice is crystal clear and completed the video in around 25 mins😆
Sina nice job 😎 💥🤘🙌 like it a lot :)
🙏👍
geat video really enjoyed it !!
🙏
happy for your lessons and congrats on your marriage!
Thank ya!
Hope your lifes going good, love ur content btw
Thank you very much!
Return of the King
Too kind 👊♥️
Finally 😭😭, your back sir ...
Glad to be back
Thankyou for this video
Love from nepal 🇳🇵
Keep shining keep sharing 😊
Ps: You have got a subscriber 🎉
Hello Nepal
thanks for the lesson
Thanks for watching
Please make a playlist for beginners javascript.... U are a great teacher and want to learn more.. From u Thanku for this playlist ❤
The only one word after watching ---
Amazing ❤❤
🙏
wow you are back
That's right!!!
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 = '';
Finally back
Hell yeah ✊
Congrats 🎉🎉
Thank ya!
Welcome back
Ty!
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 ?
I can't wait for the day when you have React courses somewhere. I would kill for it.
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
I’m not cool enough to know what drip means but thank you :)
liked, commented, subscribed!
Welcome aboard!
Finally!!!!
Learning from your video! You got merch? =)
Yep ColorCode.io
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
Glad to hear it
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
the above comment was before watching your complete video so excuses
Thank you!
♥️
@@ColorCodeio 🤍🤍
come back, please! Hug from Brazil
درود برشما با این ویدیو های با کیفیت و خوبتون یه سوال بنظر شما بنده اگر ازفرانت اند به ماشین لرنینگ و دیتا ساینس سوییچ کنم آینده کاری بهتری داره ؟ لطف میکنید پاسخ بدید
Bose is back 🤠
Thank you bro. I find job with your help 😢
¿Does the picture on your wall is the album cover "The best of sade"?
Yes! Good eye
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?
Yes, soon
Thank you sir
You're welcome
@@ColorCodeio sir, how can i get javascript mastery course from colorcode ?
your videos are really so good! i just subscribed yesterday 😀 may i know how you inserted cucumber icon in console?
Awesome guy where are the remaining 5 ?😊
I love you man
Lovely
Why do you work with the console? I want to use it for my file and now I am confused.
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.
It's called RunJS: runjs.app/colorcode
Thanks for this.
Really great content.
Btw what is kabab case 👼 (33:04)
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 ! .
Good catch!
❤ can you make a video about Event loop and browser api, call stack and callback queue ( also interesting to know how it works )
MAKE MOre videos. We miss you
How's it inefficient with memory management?
Wooooww🎉🎉🎉🎉
WOW. Are we back?!?!
We're back!
Video Video.. 🎞
We wanttttttt,. more more.. Video 🎞🎞
Love YoU ❤
👍 Coming soon
i was thinking you stop making videos bcz your video views are underrated
Hell no! Every view matters 🙏