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

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

[@anlai4586]

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

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

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

[@workingTchr]

Excellent explanation. Put me on the right road.

[@TheCodeCreative]

Awesome!

[@drkunivrs]

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

[@TheCodeCreative]

Glad it was helpful!

[@aryomuhammad8254]

Man seriously, you saved my life! Thanks alot!

[@TheCodeCreative]

Cool, thanks Aryo!

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

[@taofeeqomotolani2311]

Super clear and precise

[@TheCodeCreative]

Glad you liked it

[@BSITVinluanEner]

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

[@TheCodeCreative]

I appreciate that!

[@mguimenez]

Thanks I'm from Argentina and I understood

[@TheCodeCreative]

Great to hear!

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

[@Viralvlogvideos]

Thanks man it helped me to understand pros and cons

[@TheCodeCreative]

Great, glad to hear!

[@jkwarren375]

Thank you for explaining it so clearly. Subscribed!

[@TheCodeCreative]

Thanks for watching JK!

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

[@jeromebranchetti6002]

Thanks Sir... What needed

[@TheCodeCreative]

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!

[@StrangerDanger352]

Thank you so much i loved your teaching 🙏🏻

[@TheCodeCreative]

So glad!

[@antoniomemo636]

nice illustrated recap 👍

[@TheCodeCreative]

Thanks Antonio!

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

[@masterprogrammer1855]

Very useful video. Thank you

[@TheCodeCreative]

Glad it was helpful!

[@andrewgarfinkel1978]

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

[@TheCodeCreative]

Thanks Andrew, glad to hear!

[@rahulbind6986]

Thank u man .. You are a life saver

[@TheCodeCreative]

Awesome! Thanks for watching!

[@Knards]

Late to the party but thanks for the excellent explanation

[@TheCodeCreative]

Excellent, thanks for watching!

[@Binary__]

Great Video. It helped me a lot.

[@TheCodeCreative]

Glad to hear it!

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

[@gilbertocarvalho7088]

Thank you . I am grateful for your help.

[@user-cu8pf3yp4e]

grateful for such a clear explanation, like+sub

[@TheCodeCreative]

Thanks for the sub. Glad it helped!

[@vitaliimohylnyi9967]

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

[@TheCodeCreative]

Excellent, glad to hear!

[@natashasimone1931]

Great thanks!

[@TheCodeCreative]

Thanks for watching Natasha!

[@hardtruthes]

good video

[@TheCodeCreative]

Thank you!

[@TheCodeCreative]

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

[@Webbi_Trax]

great video

[@TheCodeCreative]

Glad you enjoyed it

[@robertobenedit]

fantastico!

[@TheCodeCreative]

Thank you!

[@cesarpintos8418]

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

[@TheCodeCreative]

Thanks for watching Cesar!

[@KevinMaximus]

Thank you

[@TheCodeCreative]

Thanks for watching!

[@TheCodeCreative]

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

[@Pinovski]

which skin of vsc?

[@TheCodeCreative]

That's "Shades of Purple"

[@TheCodeCreative]

To subscribe to the channel: th-cam.com/channels/mOpHGj4JRWCdXhllVTZCVw.html

[@lenhu7089]

❤️❤️❤️👍👍👍thank you

[@TheCodeCreative]

You're welcome, thanks for watching!

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