HTML Collection

The HTMLCollection Object

An HTMLCollection object is an array-like list of HTML elements.

An HTMLCollection which is a live, ordered collection of the DOM elements which are children of node. You can access the individual child nodes in the collection by using either the item() method on the collection, or by using JavaScript array-style notation.

Methods like the getElementsByTagName() or getElementsByClassName returns an HTMLCollection.

Example:

var x= document.getElementsByClassName('.columns-inner')

undefined

x

1. HTMLCollection []

Nodelist gives more option , can use document.querySelectorAll instead of documentByClassName 

Nodelist:

document.querySelectorAll('a')

NodeList(269) [a#logo.yt-simple-endpoint.style-scope.ytd-topbar-logo-renderer, a.yt-simple-endpoint.style-scope.ytd-button-renderer, a.yt-simple-endpoint.style-scope.ytd-topbar-menu-button-renderer, 

1. __proto__: NodeList
1. entries: ƒ entries()
2. forEach: ƒ forEach()
3. item: ƒ item()
4. keys: ƒ keys()
5. length: (...)
6. values: ƒ values()
7. constructor: ƒ NodeList()
8. Symbol(Symbol.iterator): ƒ values()
9. Symbol(Symbol.toStringTag): "NodeList"
10. get length: ƒ length()
11. __proto__: Object

Sample differences of HTML collection and nodelist:

document.getElementsByClassName('title-and-badge')

HTMLCollection(20) 

[h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer]

 document.querySelectorAll('.title-and-badge')

NodeList(20) 

[h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer, h3.title-and-badge.style-scope.ytd-video-renderer]