DOM API - JavaScript Tutorial for beginners
Вставка
- Опубліковано 22 чер 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 🤘👨💻🔥🎉
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!
Missed your videos for quiet a longtime. Great your back :)
Ty! Good to be back.
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.
Congrats!!! 🎉 and thank you for the new video!!
Thank you too!
Your videos deserves much more than 5k
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!
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
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!
I'm sooooo happy you made another video
Me too! More coming soon.
One of the best channels for programming hands down. Thank you very much sir. :)
You are most welcome
good to see you back dude!
Thanks!
I have the perfect playlist on my collection appreciate your contribution sir
Love your lessons!
Thank you! 😃
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
Have been missing the fun for a while!
Fun is. back!
@@ColorCodeio ♥
It's good to see you back. UA-cam lacks quality which you give us.
Thank you!
It's good to see and hear you again. ☝️😼👍
✊
nice to see you again :)
Thank you!
Some very nice special effects in this video 🤩
🙏
Was waiting from a long time🎉
The wait is over!
glad you're back
That's right!
آقا خیلیم عالی و قوی دمت گرم ❤
Merci 🙏
Mesmo com dificuldade de entender o ingles, amo seus videos! continue
Great!
Finally after such a long long time 🎉🎉❤❤
🕺🏻
Wooow , sina
Finally you came back
Im here to say a big hello to Qoli
I love your approach of teaching ,You will hit that 1M in no time
Thanks for this fantastic content! 😊
Thanks for this fantastic comment
Thank you for these videos sinaaaa😅, learnt alot . Looking forward to get more fundamental JS videos 😊
Happy to hear that!
Thanks for useful staff
So good to see you , Please be regular with us😭
👍♥️
Welcome back!!!!
Sina nice job 😎 💥🤘🙌 like it a lot :)
🙏👍
Good to see you back 💪
And congratulations 🥂 !
Thank you
incredible session
Thanks Anthony
ColorCode is alive!!
Hell yeah 👍
Amazing Content 🏆
Appreciate it
Congratulations to you sir, and congratulations to me (because your js videos helped me understand js).
Excellent!
your content is very helpful to me. Please continue to make more videos like this. And use real life example
omg this course is just flames 🔥
🔥
Miss you sir ❤ finally back with Js and humour ❤
this is freaking great
Thanks!
My brain is so big now! TY
👍🏼🧠
Finally 😭😭, your back sir ...
Glad to be back
thanks for the lesson
Thanks for watching
In my mind DOM was a very serious thing like Dominic Torreto and I was afraid of it. But now iam using fetch() which needs a good understanding of DOM to update the elements and after watching this Now I know Torreto 💪. Thanks ✌👍
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 UA-camr "The Coding Train"? You both have somewhat similar styles in teaching and great humor.
No relation, but he's great
geat video really enjoyed it !!
🙏
Please make a playlist for beginners javascript.... U are a great teacher and want to learn more.. From u Thanku for this playlist ❤
U R BACK~~!!
Hell yeah! ✊
Thankyou for this video
Love from nepal 🇳🇵
Keep shining keep sharing 😊
Ps: You have got a subscriber 🎉
Hello Nepal
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
Return of the King
Too kind 👊♥️
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.❤🔥
Hope your lifes going good, love ur content btw
Thank you very much!
Learning from your video! You got merch? =)
Yep ColorCode.io
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 ?
happy for your lessons and congrats on your marriage!
Thank ya!
Welcome back
Ty!
Finally back
Hell yeah ✊
I can't wait for the day when you have React courses somewhere. I would kill for it.
Congrats 🎉🎉
Thank ya!
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
liked, commented, subscribed!
Welcome aboard!
Thank you!
♥️
@@ColorCodeio 🤍🤍
You are awesome dude. With playback speed 1.75x, ur voice is crystal clear and completed the video in around 25 mins😆
wow you are back
That's right!!!
The only one word after watching ---
Amazing ❤❤
🙏
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!😊🙌
Lovely
your videos are really so good! i just subscribed yesterday 😀 may i know how you inserted cucumber icon in console?
Bose is back 🤠
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
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 :)
Thank you sir
You're welcome
@@ColorCodeio sir, how can i get javascript mastery course from colorcode ?
Finally!!!!
come back, please! Hug from Brazil
Thank you bro. I find job with your help 😢
Thanks for this.
Really great content.
Btw what is kabab case 👼 (33:04)
I love you man
Awesome guy where are the remaining 5 ?😊
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
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!
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
MAKE MOre videos. We miss you
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 = '';
درود برشما با این ویدیو های با کیفیت و خوبتون یه سوال بنظر شما بنده اگر ازفرانت اند به ماشین لرنینگ و دیتا ساینس سوییچ کنم آینده کاری بهتری داره ؟ لطف میکنید پاسخ بدید
❤ can you make a video about Event loop and browser api, call stack and callback queue ( also interesting to know how it works )
WOW. Are we back?!?!
We're back!
¿Does the picture on your wall is the album cover "The best of sade"?
Yes! Good eye
Why do you work with the console? I want to use it for my file and now I am confused.
Video Video.. 🎞
We wanttttttt,. more more.. Video 🎞🎞
Love YoU ❤
👍 Coming soon
can u teach about Javascript Enum ?
How's it inefficient with memory management?