DOM operations with JavaScript

Finding elements by selector

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

items = document.querySelectorAll('a.class-name')

Returns a NodeList.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

element = document.getElementById('the-id')

Returns a Element.

Iterating over elements

https://developer.mozilla.org/en-US/docs/Web/API/NodeList

Note

Although NodeList is not an Array, it is possible to iterate on it using forEach(). Several older browsers have not implemented this method yet.

// Newer browsers
items.forEach(function(item){ do something with item })

// Old (how old?) browsers
Array.prototype.forEach.call(items, function(item) { do something with item })

Here’s a polyfill for ES5+ browsers from that NodeList.forEach page linked above:

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}