Master DOM Manipulation | Part 1 | JavaScript DOM Manipulation

Hostinger Deal!! Use code below to get 20% discount! on a whole host of web hosting services!
hostinger.co.uk?REFERRALCODE=1CODELAB98G53
Hey there guys!
Welcome to the Part 1/2 Master DOM Manipulation..in this video we will go over the fundamentals of the DOM, as well as looking at some more of the advanced aspects of the DOM...with plenty of examples along the way..i hope you enjoy. 🙂
GitHub File:
github.com/CodeLab98/DOM-Mani...
List of DOM Events:
www.w3schools.com/jsref/dom_o...
🙂 SUBSCRIBE - hit the bell 🔔 and choose all: / codelab98
------------------
Follow me on Social Media
Instagram: / code.lab98
Microphone I Use
Blue Yeti USB Microphone: amzn.to/3nIy4lx
RØDE PSA1 Arm: amzn.to/3yMSQGR
PC Specs
MSI GeForce GTX 1660 SUPER VENTUS XS OC: amzn.to/3apiIPV
Intel Core i9-11900K: amzn.to/3OJMSMF
Kingston 480GB Q500: amzn.to/3IphUHs
MSI MAG B560 TOMAHAWK: amzn.to/3nMFzIk
MSI MAG FORGE 100R Mid Tower: amzn.to/3PbLySI
27" Ultrasharp 4k Monitor: amzn.to/3ReC8aP
Wireless Keyboard and Mouse Set: amzn.to/3bYhMlZ
------------------
TIMESTAMPS
00:00 - Introduction
00:23 - Prerequisites
00:58 - Tools needed for the Course
01:13 - Structure of Course
01:25 - What is he DOM?
01:58 - DOM Tree Analogy
03:54 - Selecting Elements in the DOM
11:37 - Styling an Element
16:26 - Creating Elements
17:25 - Adding Elements
18:26 -- Modify Text
21:08 - Modifying Elements Attributes & Classes
24:52 - Remove an Element
25:40 - DOM Tree Recap
27:51 - Traversing the DOM
37:41 - Event Listeners
44:52 - Event Listener Example
50:09 - Event Propagation
1:00:00 - Event Delegation
------------------
👍 HTML FULL TUTORIAL: • Crash Courses | HTML 5
👍 CSS FULL TUTORIAL: • Crash Courses | CSS
👍 FIVE-MINUTE FRIDAYS TUTORIALS: • Five-Minute Fridays
------------------
Learn with Code Lab! easy to understand tutorials :-)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.

[@swedsa6004]

Bro i swear to god this is BY FAR the best DOM explanation. Please dont stop with these Videos...

[@CodeLab98]

Thank you very much! I’m glad you liked it!

[@marcosdelfino9695]

this is the first video i can follow and it doesn't make me sleepy, i finally understand DOM manipulation, thank you!

[@CodeLab98]

Thank you friend! I really appreciate that! I’m glad it helped!

[@rodneytapit5636]

Crystal clear and complete DOM/JavaScript tutorial, got much more from this in a few minutes than hours of other tutorials which left unanswered questions - the best of British!

[@zorro8375]

KZbin really be hiding the best channels your tutorials are just what I needed thanks man

[@CodeLab98]

haha i appreciate it!

[@CodeLab98]

Hi Guys, the source code for this video is now in the description, with a few minor tweaks, the concept is still the same. Enjoy 😎

[@fastlearner9993]

YOU MATE ARE A LEGEND !!!!!! PERFECT PACE!!! PERFECT TEACHING STYLE!!!! PERFECT EXAMPLES !!!!! and talking about your pace they should keep rewinding till they understand and practice at the same time no point just watching and not practicing it

[@CodeLab98]

Thank you friend! these are the comments i hope my videos can achieve.. i hope it helped!

[@oliveryt7168]

What a great introduction! Crisp and clear.... and dummy friendly (me) ;-) You're a good teacher!

[@Sameer.Trivedi]

No BS straight explaination thankyou!!

[@semakaran611]

It would be great if you can share the html and css files as templates so it would be easier to follow your code. The content is super useful, thank you!

[@Valdekist]

Make your own, since you're trying to learn it, it shouldn't be a problem.

[@goldenbones3]

@Windows Enthusiast yeah :( those files would help

[@lacag-lacag]

tis is HTMl code: Favourite Movie franchise the matrix star wars harry potter lord of the rings maervel and this is CSS code: *{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-color: rgb(49, 49, 94); height: 100vh; display: flex; justify-content: center; align-items: center; height: 100vh; } .container{ border: 2px solid white; border-radius: 4px; padding: 15px; } .list-items{ font-size: 22px; margin: 3px; background-color: aliceblue; display: flex; justify-content: center; } i tried abit to make exact background color but i could but still it looks same the edition on css.

[@jonathanr7603]

It's a waste of time, we want to practice JS not html and css @@Valdekist

[@mariamomolabake1971]

I love this tutorial,thanks so much Good job😊 Part 2 pls

[@ezequieljimenez3391]

Perfect tutorial. Clear, simply, and very very easy to apply! even for a begginer like me, from a foreign country and language!

[@CodeLab98]

Glad it was helpful!

[@williambienz8238]

Thank you for this. It is well done and very helpful.

[@ayoonamusi1067]

Thank you for this video.

[@yanalkamal7532]

Excellent tutorial, many thanks. Will stayed tuned for part 2

[@CodeLab98]

Awesome, thank you!

[@sammbende2]

Great content with clarity and a smooth pace. Many thanks.

[@CodeLab98]

Glad it was helpful!

[@abdullahraghib4008]

i finally prepared dom for my interview .........thank you so much CodeLab

[@CodeLab98]

That's really good to hear! good luck in the job interview! let me know how it goes!

[@abdullahraghib4008]

It goes very well... They give me a project in which i have to manage events (i.e. marriage, birthday) and show it in the dom in a sorted manner with respect to time ... The hard part was to show the overlapping of two events .... Thats all .... And i did it very well .... And i got the job. All thanks to you Sir😍

[@nigelflim]

Amazing! Definitely deserve more subs

[@CodeLab98]

Appreciate it!

[@yomziiblack3776]

Waiting for the other parts.... thanks a lot

[@CodeLab98]

coming soon!

[@raggardy]

Is there a link or a copy of the stylesheet?

[@shimmerz555]

you sir are a phenomenal teacher

[@CodeLab98]

Thank you very much! :)

[@alimansimov1929]

I appreciate your work.

[@CodeLab98]

I appreciate that!

[@shadon_official2510]

Love this

[@CodeLab98]

Thank you so much! :)

[@Eltopshottah]

Thank you ole sport

[@nacimhoc]

Great content ! keep going bro

[@CodeLab98]

Thank you bro!

[@alexisfy]

Dude! Where's Part 2! This tought me so much. I'm so grateful!

[@CodeLab98]

Will be out soon! in the process of editing

[@timothyachonu3629]

Thank you very much. This is brilliant! I am yet to finish this tutorial but I've enjoyed every bit so far. But there is something I have been trying to figure out- around minute 45, the part where you used event listerners to reveal the dummy text. Looking at the HTML you wrote, the classes and ids you selected in the CSS, and the JS you wrote, I'm wondering how you made the border of the button go away anytime the dummy text is not displayed?I have been coding along with the tutorial but I could not do that😪

[@TechyMechie]

thank you very much for such a great learning experience ;)

[@CodeLab98]

You're very welcome!

[@romelmahmud9507]

Very good video, Thank you

[@CodeLab98]

Glad you liked it!

[@negros111]

Where is css file ?

[@zeroin7819]

Thank you for a good tutorial :)

[@CodeLab98]

You are welcome!

[@baykalcelik1614]

Great video.

[@CodeLab98]

Glad you enjoyed it

[@caT_eDiTx0]

Man This Is Great . Love it♥. If You Can Please Provide Link To That Ppt So We Can Constantly Memorize It.

[@betanpc8210]

awesome tutorial

[@CodeLab98]

Thank you! Cheers!

[@vanthach7969]

Why don't you give people source code? Javascript always accompanies with HTML and CSS, without these, it is very difficult to get what you are doing. Anyway, thanks for your tutorial.

[@shubham_srt]

thanks for this

[@CodeLab98]

You're welcome

[@kellybesong988]

wow I've never commented on a tutorial video and I never comment on anything, but 6:24 into the video I had to rush down here to add a comment, wow where have you been all this while I'm just coming across your channel. This video is by far the greatest DOM manipulation tutorial I've come across thanks for this and you've earned my subscription and advocacy, would make sure I convince everyone I meet to subscribe to your channel. please how can I get you to be my mentor, what must I have to do to have you mentor me, please? that would actually be one of my great achievements for the year 😇. Thanks once more for the great content

[@CodeLab98]

Thank you for your comments!

[@carterpaul2688]

The best on the net. Trust me

[@CodeLab98]

Thanks for your kind words!

[@carterpaul2688]

@@CodeLab98 amen

[@mohamedaboobacker8950]

Dear Sir, can we get the source code for HTML and CSS.

[@19mjm91]

Files from the source are different from the ones we see in the video.

[@picardibenge2498]

I'd LIKE to request for the css file of this video. Great job by the way

[@lawrencefranklinchukwudalu1840]

This content is really helpful, thanks a lot. Where's the link to part 2?

[@CodeLab98]

Will be out soon! in the process of editing!

[@dibyanikshetry3775]

can we get the css part of the Movie Franchise?

[@awwalbadamasi6714]

Hello Team codelab, could you please leave a link to the html and css files

[@TheSincerety]

It would be extremely helpful to have the code you had in the beginning of the tutorial available, rather than the code you had at the end of the tutorial, so we don't have to reverse engineer the style etc

[@princedavis4112]

on the chapter of reveal more, mine is not working please can you send me the css styles you use in the reveal more or hidden content project

[@oliveryt7168]

1:07:05 I dont really understand, why you do target.matches('li')... I have to admit that I never properly learned JS, so dynamically typed languages are new grounds for me... Is it for the reason that you can only securly access the properties of this thing you dont know of if it's an element or something else, so you have to check and if the condition is true (target === ) you can accesss its properties..?

[@tony310430]

How was the index.html already Styled? From the get go

[@faizanullah-ky6se]

Can I move to React after clearing DOM manipulation concepts ??????????????????????????????

[@ljubodragicevic8541]

Great stuff! I don't understand.. only 750 views???

[@CodeLab98]

Glad it helped! Haha hopefully more views soon! 👍

[@PinoyWebmaster]

I want to ask if dom is it important? Specially in frontend?

[@matushini97]

Tutorial is pretty good, but github files are not full. In that way it was good training for remembering html and css too. Thank you bro!

[@tyfleming1871]

Where are the files?

[@jeroincababat565]

Do you have that project on github so that I can easily follow along?

[@TSMJonathan-po3hj]

bro please provide starter files brooo how can we practice ????

[@adrianobarbet3282]

i love you

[@harbixcoabiodun5262]

please, I can't find the link to the second part of the tutorial

[@CodeLab98]

Part 2 will be out soon! stay tuned!

[@HassanKaraouni]

I wanted to follow along, but it seems that the repo is not synced with the video. Please update if possible.

[@santoshmore2953]

is it from beginner to advanced level?

[@boyacosweep]

Is the code available somewhere?

[@lyricsdelivered]

How long did it take you to learn web development javascript?

[@CodeLab98]

It is crucial to learn the fundamentals. Everyone is different, but learning the fundamentals should take you 3-6 months.

[@Tony.Nguyen137]

I noticed something odd in JS. Why is the document object not capitalized, like Document. Other built in Objects such as Math., Num. are capitalized.

[@CodeLab98]

that's a very good point! let me know what you find out!

[@Tony.Nguyen137]

@@CodeLab98 someone told me its because document is from the browser, and built in Objects like Math is from javaScript

[@saami9606]

i checked the source code but it doesnt have the code from earlier in the video with the other examples, which is a bummer

[@Abhishek-mh4mp]

hey plz help me at starting point of course const a=document.getElementById("someid"); //it is id of header tag console.log(a); actually it is printing null in console I searched answer but I cant find answer or I cant understand explain me

[@djangodeveloper2973]

the whole course content is cool however event delegation, event listeners and event propagation were cool topics.

[@Guamikeni]

I love you

[@CodeLab98]

I love you too! haha

[@SamerSaida]

link to Part 2 please?

[@CodeLab98]

Currently in the process of editing...will be out soon!

[@oliveryt7168]

50:30 one minor spelling mistake: It's propagation", not "probagation". :-)

[@nuwanthuduwage6869]

Thank you so much for sharing your experience and thoughts, Can you please clarify that kzbin.info/www/bejne/hmixmHmcfsaKnbc is DOM Tree or Render Tree (CSSOM Tree + DOM Tree), please correct me if I am misunderstanding, as per my understanding DOM tree is not having CSS rules applied as shown in the diagram.

[@CodeLab98]

Hi, Its a DOM Tree :)

[@sauravsubba9987]

Can u provide all the files??

[@CodeLab98]

I will post them in the description 😊

[@sauravsubba9987]

@@CodeLab98 thanks mate waiting for it.

[@plxh6408]

Where are the html files/ source code

[@ItisSuperfluous]

Why do you not show the style code for each example? It's kind of necessary for these examples.

[@CodeLab98]

I have included a link to source code in the description

[@kamille1957]

@@CodeLab98 the source code in github is different from what is shown in the video. Hope you could upload the same code. awesome stuff though. Thank you very much!

[@Beluga0fficial25]

What accent the guy talks in?

[@CodeLab98]

British :)

[@premsainoolu8290]

where is the source code bro. without source code how can we watch it and practice along with you. just leaving

[@CodeLab98]

I have added the source code in the description

[@ogucharles2800]

you know what? you were a lot fast while tutoring. could you be a little bit slow on the next video please? it was hard to keep up most times. thank you.

[@CodeLab98]

Thanks for the feedback..i will look to slow down in future :)

[@rodneytapit5636]

@@CodeLab98 I disagree the speed is right, Ogu needs to listen with more attention. If you you slow it then you will not keep the attention in the viewer.

[@mukhtarubaid6119]

If he is fast slow the speed of video from playback speed

[@tientruong1172]

Your video is good, but it is really hard to listen to. Maybe you need to improve it