October 10, 2018
Just putting some notes on some practices on DOM manipulation. This involves using the browser developer tools. In the case of Chrome, it can be accessed using
Cmd + Option + i on OSX.
First up, in the Elements tab, one can use the DOM viewer or element selector tool which allows navigation through the DOM and selection of individual elements. Shortcut for this is
Cmd + Shift + C on OSX.
window will give the window object. To clear the console, use the clear icon.
To query the DOM, common methods include:
The last two methods will give a collection of elements.
Query selector methods:
The collection returned by these methods are not arrays. But one can use
Array.from to convert them to array-like objects.
const ps = document.getElementsByTagName('p') Array.from(ps).forEach(p => (p.style.backgroundColor = 'red')) // turns all p's red
console.dir when needed.