jQuery to ES6

jQuery-to-ES6.md

A note on NodeLists and HTML Collections

An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node’s name or id attributes. Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.

A NodeList object is a collection of nodes. The NodeList interface provides the abstraction of an ordered collection of nodes, without defining or constraining how this collection is implemented. NodeList objects in the DOM are live or static based on the interface used to retrieve them

const $header = document.getElementById('#header');
const $headings = document.getElementsByTagName('h1');
const $nav = document.getElementsByClassName('.nav');
const $footer = document.querySelector('footer'); // returns the first element in the document that matches
const $links = $nav.querySelectorAll('a')

const $accordions = […document.querySelectorAll('[data-toggle="accordion"]')]