JavaScript DOM Crash Course - Part 2

[@letmewatch.]

14:54 thank you for not editing that out. Had a laugh and it boosted my spirit

[@eS_Zett]

00:23 Traversing the DOM Introduction 01:18 Parents 01:18 .parentNode 04:03 .parentElement 04:48 Children 04:48 .childNodes 06:36 .children 08:03 .firstChild 08:58 .firstElementChild 09:38 .lastChild & .lastElementChild 10:37 Siblings 10:37 .nextSibling 11:17 .nextElementSibling 12:04 .previousSibling 12:31 .previousElementSibling 14:12 Create Elements 14:30 .createElement() 16:50 .createTextNode() 17:27 .appendChild() 17:59 Insert Created Elements Into the DOM 18:12 .insertBefore()

[@NairiAreg]

parent children sibling...is this a porn?

[@rene78]

@@NairiAreg Partly yes. He has forgotten one: 14:48 create new dick

[@amongdoomers9464]

@@rene78 lmaoo🤣🤣

[@tunamusic2314]

thanks so much

[@thearbitarygeek2463]

thanks bruhh

[@romeojoseph766]

I am Romeo , I am a self taught for now and I'm about 16 years old I have been learning front-end development since one and half years . fan of your work!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@LukasShannon]

I've been following you for just a few weeks but your content is incredible! It's thorough while being accessible enough for me to start using right away. Very practical explanations, a great voice for the narrations, and a wide range of content covering all of the tools I need! Thanks a lot!

[@TraversyMedia]

Thanks man, I appreciate that

[@LukasShannon]

Pleasure :)

[@mylesdavies9476]

Was about to write an almost identical comment, absolutely love this channel, thank you so much for creating these videos, they are taking my coding abilities to new levels :)

[@muhammadtariq_]

how you guys doing? its been 5 years any progress?

[@casedup]

Duuuuude! Thanks for not editing that out. Good humor and learning just makes sense.

[@AzTreandwealth]

I just want to say a MASSIVE thank you! I have been waiting for someone to create a video tutorial, specifically to do with Javascript and the DOM, and this is a simple yet outstanding one. I love these videos man. I just completed codeacademy a few times but was still a little lost in terms of how to put JS together as a web developer. This stuff has been a great help so far. I have been practicing in the console as you have been explaining and my understanding of JS and the DOM is definately expanding very quickly, and I am starting to connect the puzzle of JS a lot more. Excellent teaching style as well. Once again, many thanks!!

[@kristinaivanova4170]

I just love this guy...I was at the edge of giving up coding and decided no to by watching Brad's tutorials cause they are somehow giving me hope and his voice is my light lol

[@widespectrumcreators4691]

Me too! 🥰🤩🙂👍🏼👍🏼

[@whatsup1670]

Как идут дела?

[@bricerichard6305]

have you got a job already?

[@iansanders6466]

Just recently discovered your channel. This has to be the most concise series on DOM manipulation I have ever seen. Thank you so much for uploading these

[@aaryanbudhirajamusic6874]

They can show as many ads they want whether it's in the starting of the video, in between or anywhere, I can watch all of them to learn from you. You make a difference bro. I'm in college rn, but when i start earning, you can expect a really big donation. Cheers!

[@nishanthsubramanya1931]

I disable my adblock when I get into Traversy Media!!! You are just awesome.

[@TraversyMedia]

I REALLY appreciate that. Adblock is a killer for us small content creators. Many people do not care, thank you

[@essanhaji]

oh shiit mine is still on , thanks for reminding me to add the channel to my allow ads list on my addblocker

[@mofe620]

@@TraversyMedia Hardly a small content creator now though 😊 Well done.

[@cryptouniversity4109]

​@@TraversyMedia you big now sir

[@erenkucuker-dev]

This video series really helpful. I had been working 2 weeks with javascript tutorials but you need to got these fundamentals rather than operands or something else. Thanks, brad.

[@ahmedsandoqah9720]

We're now in 2021, can you see this kind of courses implement for fronend beginner ?

[@xhappybunnyx]

For anyone who doesn't know (I'm sure traversy's using it nowadays), pressing ctrl-D after youve highlighted text will also select the next instance of that text it finds, so you can do edits like at 4:19 much faster

[@Peywan]

youre so amazing brad, your tutorials ins the only ones i need for javascript. you're literally the best teacher that i didn't have!!

[@mudassirjabbar4]

I don't know if it has to be linked or not with my previous basic knowledge of js from random platforms, but as a code newbie i would like to testify that this is the best and amazing explanation of basic Javascript...

[@lynguist]

traversing the dom - with traversy the don ;) thank you so much brad!

[@rorjackson]

I would disable my ad blocker to support you as much as i can, I love your content and method of teaching, You are awesome, I hope one day I shall create something awesome and that credit will certainly go to you. Javascript was a nightmare for me as I am learning from videos only. You have made javascript so easy and fun, thank you again. Keep making more videos kindly.

[@alexlun4464]

Dude I swear your crash course on DOM is one of the cleanest tutorials out there. Nobody, and i mean this after using multiple resources for different topics, can explain things the way you do. I'm really having fun watching your crash course. Sorry I'm poor man can't help you on patreon.

[@christophercarr5865]

Super helpful -- this has been a much-needed supplement to the DOM section in the Udacity Front-End Nanodegree I'm working on (not their strongest section). Now I'm looking for a higher-level walk-through of the DOM's structure and function.

[@asmamanzoor7341]

Thank you for this great tutorial series on DOM. I have bought your udemy javascript course and intends to buy more courses after completion. Thanks a lot for the lovely courses and tutorials.

[@yatheeshgowda6191]

I seriously love the way you explain stuff but the moment I become more conscious was from 14:48

[@dorsolomon7251]

In the element insertBefore method, you can also use the "firstChild, lastChild" methods ... Great serise !!

[@TheGerm24]

"Should I edit that out..." I like your casual style. Its funny and engaging.

[@NoahNobody]

Nice dic joke. I'm glad you didn't edit it out.

[@ademmohammed3939]

LMAO 😂😂😂

[@siwilson1437]

Laughed for ages at that, caught me right off guard :D

[@OG_CK2018]

I am so useless that i did not even get the newDic() joke...will someone pls explain D:

[@noyoudidnot3513]

@@OG_CK2018 D:

[@raymondorenda7385]

Great Stuff. React.js journey started this way. Front end will soon be coded in javascript only. HTML and CSS will technically go behind the scenes.

[@joshchinwendu]

I don't understand while people will still dislike such a nice video

[@autumnaurora8299]

"Neither one of them are inside of each other so they're siblings" Alabama : hold my beer

[@OG_CK2018]

??

[@saltysexyyy6336]

@@OG_CK2018 SWEET HOME ALABAMA INTENSIFIES

[@RozArialind]

tbf child elements are inside their parent elements so...

[@mostafasalaheldin812]

you made it so simple, thanks from Egypt

[@triptichhetri]

Thank you so much for all the tutorials... learning about parentElement help me finish something that I was stuck on for weeks.

[@MuhammadjavohirSuratov]

Great videos, Brad. Keep it up! You are creating tons of videos lately :) Make sure to have a rest time-to-time :)

[@drummerplace590]

Thnx, very clear and ease to consume the content you provide!!!

[@King-tp6ui]

14:49 I love this part

[@Hattrick249]

0:57 too lmao, what an interesting way to define what a sibling is

[@maximocaceres4685]

same

[@zareisajad98]

This man is a legend.

[@seyedmasihsajadi8063]

Thanks for this video. It was excellent. now just i have a question. why u didn't use newDiv.innerText or newDiv.textContent ?

[@osiobeajiri1711]

Your videos are interesting and full of depth, I had to go download more of your videos. Keep up the good works.

[@mlakshmiv78]

Excellent explanation. You give me hope.

[@studythainow]

Really great video. I'm amazed at how little I knew about this. Thank you for the practical explanations.

[@chimpionboy]

This is so wow. I didn't have a clue that this could've been. Thanks Brad for sharing this tremendous know.

[@AJ-le3yh]

Traversy Media discussion traversing the DOM!

[@photographyhub7309]

thanks man I hope every minute of the lesson sticks to my mind as the "newDic" part did lol!

[@Glebtc]

Thank you for not editing "that" out :)

[@dih12]

TRAVERSING THE DOM - It is nice that you got JS DOM rule based on your name :)

[@yanivsalman9685]

why dislike it? you dont like go away . its damm good i dont understand why dislike something like that/ it pisses me off to see 4 dislikes

[@bartmj]

It's for saying "Jezus I can't type" xD it's breaking the Decalogue.

[@kih9102]

It's probably Brad's competition so relax.

[@birsingh5388]

var newDick :) 14:50 hahaha, great humour.

[@alitalaee7468]

thank you so much for all tutorials you teach everything so well

[@lucazanda212]

The div joke absolutely killed me "...we can take this div and do different things with it"

[@fanaFSF]

Hi. Thanks for all your videos. You have a great gift for explaining things.

[@haileywale1527]

i learn new method this is" Newdic()" thanks traversy!

[@onesandzeroes]

In short, vanilla javascript dom manipulation is still cumbersome and inconsistent. I'm back to jQuery. I prefer having this one extra file to avoid the torture. Probably unintended result, but this video has convinced me that jQuery is still needed :)

[@panchopaulo111]

A video of your own bloopers would be awesome.

[@XboneAus]

01:00 Brad: "Neither one of them are siblings because they are not inside each other". Alabama: uhmmmm

[@OG_CK2018]

?

[@RozArialind]

travesty: is that too much? editor: no, no. its fine keep going

[@mnfak4333]

Thank you for this awesome tutorial for DOM

[@kellyt6110]

Great video, thank you for your time creating this. Quick question - 19:30 Why are two variables from the header required here...?

[@jackpaperhands]

BROSKI, you're a fucking legend

[@user-oy6my2fg5k]

man, thank you so much for creating such great courses!

[@omarfarooq686]

Love your videos man

[@codybishop7526]

Wow, you are awesome. I went from the Coding Train JavaScript fundamentals playlist to this Dom crash course and it makes perfect sense now. We use JS to manipulate webpages by accessing the elements in the Dom. Yay. But one small observation. I think it would so awesome if after you demonstrate how to do something (like get a dom object by calling the class) you could give a real world example of why you would make this distinction. I just pulled that at random, but in general it really helps not only know HOW to do something with code but also knowing WHY you would do something a certain way. Awesome videos man!

[@myklrogers4373]

DAAAAAHAHHAA "should I edit that out...nah"! Brilliant :D!!

[@amongdoomers9464]

Time?

[@nicotomomate]

14:45

[@tech_channel110]

very well explained brad

[@SumitSarkar96]

watching for the third time. still learning........

[@Martin958]

When the element was changed to 'Hello Div' why didn't it replace the current of 'Item Lister' in the page tab?

[@jakebackpack8292]

"Neither one of them are inside of each other so they are siblings" HAHAHAHAHAHAH

[@sergeiabramov282]

Great video as always, thank you Brad!

[@belmiris1371]

This series is really great, thank you! I'm not sure which avenue to use to suggest themes for future videos so I will try it here. I know you've done Angular 2 videos for Udemy (I signed up for them) so I would really like to see a video on the basics of setting up and getting started with the ag-grid in an angular 2 project. It seems to be the only real free grid but the site is pretty random and confusing and I'm kind of confused with how to get started. As far as I can tell, if you make it, it would be pretty much the first one on the internet. Thanks again.

[@barryjohnson2756]

Awesome two videos. keep the hard work.

[@stardommansion6773]

thank you for all of your videos

[@hiryuimajin]

Sometimes I just play your videos on autoplay even if im asleep. We don't mind if you put an ad every 10 minutes =)

[@marvinespinoza8671]

"Should I edit that out?....Nah". Dead! lol

[@parkerAmv]

Thank you brad this is really helpful 😇

[@mavoolumma]

You are a life saver ! 🥰

[@nilupulperera]

Excellent! Thank you very much.

[@iancarr3923]

Excellent as always.

[@zropoint5899]

Hi, Congrates for 2M subs

[@anjugarg5006]

thank you brad

[@abhishekshah11]

Elements are a special type of Node ie HTML .

[@deepwoodsengineering3763]

Once again, great video boss!

[@heshankumarasinghe3159]

Thank you.... I learnt a lot of stuff.....

[@jbelle3177]

ctrl + D you can select the same word

[@kingasaurio3597]

It's cool to learn all this syntax, but when would you need to use this? Where to see practical examples of this?

[@christophersanchez3118]

I learn faster from you specially dom manipulation. if i can get a tech job in the future i will join your patreon :D

[@edwardmacnab354]

Is there a compact reference that will enumerate all the possible keywords and what they are used for . I suspect that this would be a very large list from which you have used only a few commonly used examples .

[@mm178_]

That was great thank you very much also the link for the video codes doesn't work

[@GammerAdam]

Hi Brad! Really love your videos. One question though: why don't you upload your example code to GitHub? I think it would be much more convenient, no?

[@TraversyMedia]

Gradam i always upload my big projects to github like framework stuff. I do so many small front end stuff i would have 300 repos. Im starting to use codepen for smaller projects

[@yashsimra6090]

sir,you can make use of alt key and make changes at multiple places at the same time

[@prashantsingh5142]

Thanks for sharing quality

[@DanielK48]

Awesome videos ... all 4 of them ;)

[@gonzaotc]

Great video!

[@thearbitarygeek2463]

Love the content maaaaaaaaan

[@juwon3426]

you're amazing thank you so much

[@kunalpandey7189]

thank you for the tutorials

[@AbdullahMamunJust]

just wow.Thanks thanks and thanks a lot. How can I show you that I am so gratefull to you!!?!!

[@nowyouknow2249]

Thanks Brad!

[@nikhilsai25]

sir ,what is the use of DOM ,as we can directly implement in the html code

[@hiteshatluri9509]

yes ,even i have the same doubt

[@akashsapkota4868]

@@hiteshatluri9509 DOM is specially used to offer functionality in your webpage. for example when the user clicks the okay button, a thank you text appears so for that text to appear you must create element by javascript or create from HTML but to acees that you must need to get that element by queryselector or any sort of selector which is called DOM manipulation and its uses. Also you cannot create a clickable button from html, its only possible with DOM

[@nikhilsai25]

@@akashsapkota4868 Thanks for your answer .

[@peteromoniyi3535]

Nice work.

[@JeremyGalloway]

Why don't these videos discuss innerHTML? My question is, why would I go through the extra steps of createElement, createTextNode, and appendChlid when I can just use innerHTML? Is there some difference/benefit to using one over the other?

[@astratow]

createElement gives more control over what you do.

[@hachij_]

awesome! part 2!

[@martins-ecke]

that was awesome! Thank you very much =)

[@perrymitchell7118]

Im glad you didnt edit it out; I had a cheap laugh!

[@McKisiek]

Can I simply use innerHTML attribute instead of creating text node and appending this to created element, as you have shown in the video? What's the difference?

[@joesden9628]

Grande Brad!!!

[@danbarber9137]

Jokes @ 14:50 :D

[@awsmnessdesignstudio5252]

lol

[@MrBestard]

haha, glad I lowered my speaker volume

[@TheReverOcelot]

That's why I love Brad, because he is a real human being.

[@rickmediacollege9441]

The momeny you see this comment and you are on 14:20 and your like "its coming! its coming!"