Do You Know The Difference?

FREE DOM Traversal Cheat Sheet: webdevsimplified.com/js-dom-t...
If you have ever worked with the DOM before then chances are you have worked with both nodes and elements. No matter what you do with the DOM you have to interact with one or the other, but which is the right choice for you? In this video I will explain the differences between nodes and elements so you can make the right choice.
📚 Materials/References:
FREE DOM Traversal Cheat Sheet: webdevsimplified.com/js-dom-t...
Node vs Element Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:26 - Node vs Element
4:30 - HTMLCollection vs NodeList
#NodeVsElement #WDS #JavaScript

[@SuboptimalEng]

What Kyle teaches: CSS styling What I want to learn: Hair styling

[@arunrawat3142]

😂

[@gopalloharnew5948]

😁😁

[@DracoVoldre]

He did it recently x)

[@SuboptimalEng]

@@DracoVoldre I saw 🙌

[@sidthetech7623]

The thing I like about Kyle's CSS tutorials is he always does it with style.

[@fabaladibbasey7453]

Also Nodelist can easily be converted into array with spread operator to be able to have all JavaScript array method functionality

[@buraksurumcuoglu8303]

Great tip brother.

[@faizanahmed9304]

I agree

[@ruturajbhandari7695]

Can we use Array.from()

[@DilanDog]

This guy is born to be a teacher and mentor

[@programmingforfun4158]

You are genious bro. Instead of focusing on just basic things you always dive deeper.

[@Stevie1derson]

Tip to use Array methods on dom elements from document.querySelectorAll() 1) Array.from(document.querySelectorAll(“element”)) 2) […document.querySelectorAll(“.selector”)]

[@samandarboymurodov8941]

Thank you. Useful tips.

[@ayushkushwaha171]

Thanks for this!

[@oldclient]

Very informative. First time I noticed the difference between these DOM methods when I worked with , and nodes in a project. You have to notice that Node also is handling attributes and other DOM types. Therefore, the nodeType of a Node has these values: 1 (element), 2 (attribute), 3 (text) and more... Nine or ten in total currently.

[@connorallen162]

Super helpful! this was such a mystery to me. Though I see why direct DOM manipulation isn't exactly encouraged for beginners, this kind of operation could really use a framework to make it more maintainable and scalable!

[@AustinThomasFilms]

I found this on your website and came to KZbin to give you a like. Super helpful!!!! This cleared up a lot

[@m4m205]

You just save my life. I am working on a project and I need to understand this. Thank you.

[@karthicksj1936]

Thank you Kyle for giving this cheat sheet.Your teaching is also awesome 👌👌

[@nsharma4981]

Only you can demystify the most cryptic of JavaScript's intricacies in such an easily understandable manner within 9 minutes, Kyle! This was really helpful! :)

[@DarkSomaX]

Thank you so much, I was breaking my head trying to understand the differences between the nodes and the elements and how they work 🙃

[@codlover1468]

You are awesome brother. You clear all my doubt. Love from 🇮🇳

[@pierre3639]

Awesome! Well explained and simplified

[@talatkuyuk6556]

This was my pain, could not understand the weird behavior of the nodes and elements. Thank you very much, now I understand.

[@HarshKapadia]

Wow! AMAZING video Kyle!

[@franciswayungi3519]

Thank you very much Kyle for your detailed explanations.

[@talhaibnemahmud]

Extremely helpful video ❤️

[@justanotherhotguy]

Learned something new today, thank you!

[@alexmercer8984]

Bro, I absolutely Love this video!

[@bones_twisting_sorrow4750]

Great explainer, thank you Kyle.

[@Nashiuz]

Thanks, short and to the point. I like Kyle's videos only for this reason.

[@YaseenAli08]

thanks alot, kyle your tips and teachings are very informative and helpful.

[@johnnypark5398]

Super well explained. thank you!

[@bayasahamed1815]

Thanks for this video and clear explanation.

[@raven.4815]

Can't thank you enough for this! You really saved me from a couple of headaches lol

[@sereneabrahammathew9738]

That info on live updates is really useful 🙂

[@dave6012]

Yup, can’t say how many times I’ve redefined the same query selector inside functions for dynamic content. Now I know I can keep just one definition in the global scope to get the updates.

[@Enes-ik4bm]

Thank you for videos. Love from Turkey 🙂

[@deepaknegi4385]

Awesome information, thanks for sharing

[@Stormpaw]

Thanks, that video helped a lot!

[@michaeleke3913]

Great Video...learnt alot!

[@naveedalirehmani4135]

Thank you Kyle, Thank you very much!

[@milanpavlovic8141]

This helped me soo much

[@tomasgilamoedo8301]

Great content! thank bro

[@yaseenlakhdhar6090]

Awesome Kyle thanks!

[@vahidseyidov]

Thanks for all man

[@raymondyoo5461]

great video thanks a lot for your tip

[@geforcesong]

That's a good point. thanks!

[@MrTomro]

i had no idea about the live update thing. ty

[@PerfectionOfError]

Learned something new!

[@shwackthenoobsac]

Great content

[@realfranciscohermida]

Couldn't you easily convert either type of collection to arrays and not have to deal with live updates if that is not desired?

[@tomraaff4576]

you can use instanceof to see if a node is an HTML element. It makes working with nodes easier. ie. if (node instanceof HTMLElement) { node.innerText = 'this is an html element' }

[@simonshurety3870]

I'm not sure how to set this up?

[@arulmuruganK94]

I always had doubts when it comes HTML node and element

[@viktorberczeli3009]

Can we get a collection of your cheat sheets Kyle? Pleeease!

[@gopalloharnew5948]

Kyle don't use any vscode theme but still he customizes it a lot which we cannot see directly !

[@dave6012]

Shedding light on the dark corners 🙌

[@srinik9999]

I thought it's Node JS vs Someother New technology like Nodejs. 😂

[@nayyyhaa]

Hahaha samee😂

[@mzpl7357]

me too

[@jonathanjeshualaniba5958]

i immediately searched for element js XD

[@AshokKumar-yi5ph]

Me toooooo

[@WillAyeAce]

I thought the same

[@suryapratapsingh5149]

Please cover advance concepts of ES6 and ES7

[@user-mf1ft6iz4l]

super awesome

[@user-mo3cw6go7c]

I ask this my self a long time. Now i gonna figure it

[@hartztech8098]

Great to reason for selecting because HTMLCollection its update automatically, When we selected sometime we don't want to update selecting further that we required.

[@zenlogie9310]

but Kyle, why would we wanna have a static list that doesn't live-update ??

[@benbrahimilias426]

I think it's useful in filtering;

[@vatsalyasinghi438]

Please do a tutorial on next js..

[@Pacvalham]

Does this prevent live updates? const parents = Object.freeze(document.getElementsByClassName('parent'))

[@AsakuraAvan]

So a node is a superset of an element? Every element is a node but not every node is an element?

[@benbrahimilias426]

I think elements is a subset of a node.

[@SanjeevKumar-fi1kt]

Hlo sir I need ur help... how can I contact u?

[@tinmank]

I've got four consecutive notifications this video, its like youtube trying to get an answer for you. do you but do you?

[@batuhanunal9380]

wonderfull

[@alexmahone501]

Beast

[@alexandersage1850]

Before I watch… my guess is that nodes refer to anything while element refers to just tag based ones. Element would exclude text nodes and such Edit: despite my poor wording, I appear to be correct. Sweeeeeeet

[@Shuyinz]

I didn't get it. Why would you prefer static over live update on HTML? I can't see any real case scenario where it would be harder to debug?

[@mhombach3035]

That was my question too, but I guess that in bigger projects you never know what sideeffects are triggered by calling some function. And let's say you are iteration through the "live updated list" with a for-loop and you are creating a const before that loop and store the list's length in there, then the iteration is faulty if some new element is added inbetween, because the for-loop won't reach the end of the array since it changed length. I guess it's not "bad practice" to use either, you just have to be knowing what you want to do, what things are happening inside your app and then decide for the best method :)

[@Shuyinz]

@@mhombach3035 Sounds very reasonable! Great! Thanks for sharing! :)

[@gopalloharnew5948]

oOo that's why you prefer querySelector instead of getElementsByClassName !

[@funnyclipsmsda]

I have a request for a video. I do HTML, CSS and JS coding. For one of my projects, I require a custom scrollbar. I know how to make one, but the conventional ::-webkit scrollbars aren't as customizable as I'd like. What I'm looking for is to replace the scrollbar with a div, so that you have to drag the div to scroll, not the scrollbar thumb. Please help me, I haven't found a solution online yet.

[@smilo_don]

One way would be to make the div draggable then use the ondrag event to calculate a position and scroll to it using window.scrollTo but it can be dragged both horizontally and vertically so you would have to lock it to only one.

[@Arabian_Epileptic]

4th

[@trentreimer130]

I'm more inclined to listen to someone who plays a Jackson.

[@mohammedelhadididi4612]

First comment , I know that's dumb but...😂

[@Arabian_Epileptic]

Your the 1st That’s amazing 💪🏼

[@mohammedelhadididi4612]

@@Arabian_Epileptic thanks 😃