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! :-)

[@TheCodeCreative]

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

[@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!

[@TheCodeCreative]

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

[@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 :)

[@workingTchr]

Excellent explanation. Put me on the right road.

[@TheCodeCreative]

Awesome!

[@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?

[@aryomuhammad8254]

Man seriously, you saved my life! Thanks alot!

[@TheCodeCreative]

Cool, thanks Aryo!

[@BSITVinluanEner]

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

[@TheCodeCreative]

I appreciate that!

[@Viralvlogvideos]

Thanks man it helped me to understand pros and cons

[@TheCodeCreative]

Great, glad to hear!

[@drkunivrs]

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

[@TheCodeCreative]

Glad it was helpful!

[@mguimenez]

Thanks I'm from Argentina and I understood

[@TheCodeCreative]

Great to hear!

[@taofeeqomotolani2311]

Super clear and precise

[@TheCodeCreative]

Glad you liked it

[@damilolaoladele9670]

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

[@TheCodeCreative]

Glad it was helpful!

[@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!

[@jkwarren375]

Thank you for explaining it so clearly. Subscribed!

[@TheCodeCreative]

Thanks for watching JK!

[@samadkhan-ch1bx]

A very Nice and Helpful Video👍👍

[@TheCodeCreative]

Thanks, glad it helped!

[@TheCodeCreative]

To subscribe to the channel: czcams.com/channels/mOpHGj4JRWCdXhllVTZCVw.html

[@user-ux6wg8ch7w]

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

[@TheCodeCreative]

Thank you! Will do!

[@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 😀

[@andrewgarfinkel1978]

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

[@TheCodeCreative]

Thanks Andrew, glad to hear!

[@muhammadilhamrobani7042]

very helpful! thank you for your explanation

[@TheCodeCreative]

Glad it was helpful!

[@StrangerDanger352]

Thank you so much i loved your teaching 🙏🏻

[@TheCodeCreative]

So glad!

[@antoniomemo636]

nice illustrated recap 👍

[@TheCodeCreative]

Thanks Antonio!

[@oleksiipetrenko3824]

Best video on the topic I've ever see

[@TheCodeCreative]

Great to hear, thanks for watching!

[@jeromebranchetti6002]

Thanks Sir... What needed

[@TheCodeCreative]

Glad to hear!

[@Knards]

Late to the party but thanks for the excellent explanation

[@TheCodeCreative]

Excellent, thanks for watching!

[@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.

[@rahulbind6986]

Thank u man .. You are a life saver

[@TheCodeCreative]

Awesome! Thanks for watching!

[@vitaliimohylnyi9967]

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

[@TheCodeCreative]

Excellent, glad to hear!

[@michamarkiewicz5355]

Very helpful thanks!

[@TheCodeCreative]

Glad to hear, thanks Michal!

[@juanguirao]

Very useful!

[@TheCodeCreative]

Glad to hear that!

[@aronreis]

This video was great

[@TheCodeCreative]

Thanks for watching!

[@user-cu8pf3yp4e]

grateful for such a clear explanation, like+sub

[@TheCodeCreative]

Thanks for the sub. Glad it helped!

[@hardtruthes]

good video

[@TheCodeCreative]

Thank you!

[@cesarpintos8418]

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

[@TheCodeCreative]

Thanks for watching Cesar!

[@Webbi_Trax]

great video

[@TheCodeCreative]

Glad you enjoyed it

[@natashasimone1931]

Great thanks!

[@TheCodeCreative]

Thanks for watching Natasha!

[@robertobenedit]

fantastico!

[@TheCodeCreative]

Thank you!

[@KevinMaximus]

Thank you

[@TheCodeCreative]

Thanks for watching!

[@lenhu7089]

❤️❤️❤️👍👍👍thank you

[@TheCodeCreative]

You're welcome, thanks for watching!

[@Pinovski]

which skin of vsc?

[@TheCodeCreative]

That's "Shades of Purple"

[@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

[@AhmedIbrahim-fi2so]

dud that is so confusing 😩😩😩

[@TheCodeCreative]

Is there anything in particular that you found confusing?

[@BOGDES83]

well explained. thank you!🙏

[@TheCodeCreative]

Glad it was helpful!