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);
}
};
}