HTMLCollection vs. NodeList Explained!

An exploration and comparison of HTMLCollections and NodeLists. HTMLCollections and NodeLists are different types of collections that contain DOM elements or nodes. An HTMLCollection or NodeList is what gets returned when we use various JavaScript selector methods like getElementsByTagName, getElementsByClassName, querySelectorAll, etc. By understanding the differences between HTMLCollections and NodeLists we can better decide which selector methods to use. Created by Gregg Fine.
📖 Download my FREE "Google Search Secrets for Developers" Cheat Sheet:
store.thecodec...
🗣JOIN the Code Creative Facebook group! :
/ 1612600368887577
🔴Subscribe for more free Code Creative videos: : / @thecodecreative
🌐 The Code Creative Official Website
www.thecodecre...
🎓 The Code Creative Courses
www.thecodecre...
✅ Recommended related videos:
Debouncing Explained
• Debouncing Explained |...
Memoization Explained
• JavaScript Memoization...
Sorting in JavaScript Explained
• JavaScript Comparator ...
✅ For business inquiries contact me at [e-mail]
✅ Let's connect:
Twitter - @GreggFine
Instagram - /greggfinedev
Facebook - /hiddentigermusic

[@fmri4301]

This is the first video of HTMLCollection vs nodeList which was actually useful. Although the the implementation of Live vs Static is still weird for me... I mean static collection still update the DOM ...

[@TheCodeCreative]

Hi fMRI, glad it was useful! Let me know what was confusing to you about Live vs. Static. Can you give an example of a static collection updating the DOM?

[@fmri4301]

@@TheCodeCreative Actually all was very clear. However, a lot of articles tell you HTMLCollection = Live and NodeList = Static, which is true in most cases but then there is .childNodes which is a NodeList but also Live...

[@TheCodeCreative]

@@fmri4301 ah, I see what you're saying. Yes, that definitely is confusing to remember! :-)

[@mahaan6218]

Wow! Best video on the topic I've ever seen. Please continue uploading more vids like this one. We love to see them. Liked and Subbed :P

[@TheCodeCreative]

Thanks Mahaan, more vids coming soon!

[@oleksiipetrenko3824]

agree :)

[@LePhenixGD]

Man you saved me from a mental breakdown, I was so confused as to why I couldn't apply array methods using querySelector
Thank you very much, it clarifies a lot about how to select the elements from the DOM!

[@TheCodeCreative]

Awesome!

[@drkunivrs]

Thanks for the explanation, it's been very helpful!

[@TheCodeCreative]

Glad it was helpful!

[@Utsavojha2]

Was getting confused how nodeList was being accessed with index and forEach. Cleared me up. Thanks!

[@TheCodeCreative]

Glad to hear. Thanks for watching Utsav!

[@anlai4586]

thank for your useful video. Could you give us some examples when should use both?

[@workingTchr]

Excellent explanation. Put me on the right road.

[@TheCodeCreative]

Awesome!

[@taofeeqomotolani2311]

Super clear and precise

[@TheCodeCreative]

Glad you liked it

[@aryomuhammad8254]

Man seriously, you saved my life! Thanks alot!

[@TheCodeCreative]

Cool, thanks Aryo!

[@jkwarren375]

Thank you for explaining it so clearly. Subscribed!

[@TheCodeCreative]

Thanks for watching JK!

[@BSITVinluanEner]

man, you deserve heart and support i love your explanation brooo thanks !

[@TheCodeCreative]

I appreciate that!

[@damilolaoladele9670]

completely helpful. Thank you for such a self-explanatory content.

[@TheCodeCreative]

Glad it was helpful!

[@samadkhan-ch1bx]

A very Nice and Helpful Video👍👍

[@TheCodeCreative]

Thanks, glad it helped!

[@mguimenez]

Thanks I'm from Argentina and I understood

[@TheCodeCreative]

Great to hear!

[@abrarmansouri2746]

Thank you. 🙏And for listing the other node type! I was a bit confused but not after watching this.

[@TheCodeCreative]

Glad it was helpful!

[@tommynotts1400]

Excellent! I'm going to watch all of your videos.

[@TheCodeCreative]

Excellent!

[@Viralvlogvideos]

Thanks man it helped me to understand pros and cons

[@TheCodeCreative]

Great, glad to hear!

[@StrangerDanger352]

Thank you so much i loved your teaching 🙏🏻

[@TheCodeCreative]

So glad!

[@andrewgarfinkel1978]

awesome video! very informative . Easy to follow example to demonstrate a confusing topic. Well done!

[@TheCodeCreative]

Thanks Andrew, glad to hear!

[@user-ux6wg8ch7w]

this video is completely helpful. now I can understand the difference, keep going to do more videos❤

[@TheCodeCreative]

Thank you! Will do!

[@jeromebranchetti6002]

Thanks Sir... What needed

[@TheCodeCreative]

Glad to hear!

[@muhammadilhamrobani7042]

very helpful! thank you for your explanation

[@TheCodeCreative]

Glad it was helpful!

[@oleksiipetrenko3824]

Best video on the topic I've ever see

[@TheCodeCreative]

Great to hear, thanks for watching!

[@BOGDES83]

well explained. thank you!🙏

[@TheCodeCreative]

Glad it was helpful!

[@masterprogrammer1855]

Very useful video. Thank you

[@TheCodeCreative]

Glad it was helpful!

[@Binary__]

Great Video. It helped me a lot.

[@TheCodeCreative]

Glad to hear it!

[@gilbertocarvalho7088]

Thank you . I am grateful for your help.

[@antoniomemo636]

nice illustrated recap 👍

[@TheCodeCreative]

Thanks Antonio!

[@rahulbind6986]

Thank u man .. You are a life saver

[@TheCodeCreative]

Awesome! Thanks for watching!

[@michamarkiewicz5355]

Very helpful thanks!

[@TheCodeCreative]

Glad to hear, thanks Michal!

[@vitaliimohylnyi9967]

Good job, everything is clear. I like your channel, there are a lot of useful videos! thx

[@TheCodeCreative]

Excellent, glad to hear!

[@davesharma8946]

Thanks sir
Just wanted to point out that in array.from the second arguement is the map method so you didnt need to explicitly use the map

[@TheCodeCreative]

That's really cool! I'm gonna use that all the time now 😀

[@juanguirao]

Very useful!

[@TheCodeCreative]

Glad to hear that!

[@Knards]

Late to the party but thanks for the excellent explanation

[@TheCodeCreative]

Excellent, thanks for watching!

[@aronreis]

This video was great

[@TheCodeCreative]

Thanks for watching!

[@cesarpintos8418]

Thank you so much for this video, god bless you sir

[@TheCodeCreative]

Thanks for watching Cesar!

[@user-cu8pf3yp4e]

grateful for such a clear explanation, like+sub

[@TheCodeCreative]

Thanks for the sub. Glad it helped!

[@natashasimone1931]

Great thanks!

[@TheCodeCreative]

Thanks for watching Natasha!

[@Webbi_Trax]

great video

[@TheCodeCreative]

Glad you enjoyed it

[@hardtruthes]

good video

[@TheCodeCreative]

Thank you!

[@robertobenedit]

fantastico!

[@TheCodeCreative]

Thank you!

[@KevinMaximus]

Thank you

[@TheCodeCreative]

Thanks for watching!

[@lenhu7089]

❤️❤️❤️👍👍👍thank you

[@TheCodeCreative]

You're welcome, thanks for watching!

[@TheCodeCreative]

🗣JOIN the Code Creative Facebook group! :
facebook.com/groups/1612600368887577

[@Pinovski]

which skin of vsc?

[@TheCodeCreative]

That's "Shades of Purple"

[@TheCodeCreative]

📖 Download my FREE "Google Search Secrets for Developers" Cheat Sheet:
store.thecodecreative.com/google-secrets-cheat-sheet

[@ramidaoud3776]

I have a feeling that you edited this video on a linux box

[@TheCodeCreative]

How so?

[@ramidaoud3776]

@@TheCodeCreative maybe the camera quality

[@TheCodeCreative]

@@ramidaoud3776 ahhh

[@TheCodeCreative]

To subscribe to the channel: ruclips.net/channel/UCmOpHGj4JRWCdXhllVTZCVw

[@AhmedIbrahim-fi2so]

dud that is so confusing 😩😩😩

[@TheCodeCreative]

Is there anything in particular that you found confusing?