Power under the hood: Playing with JavaScript in the browser console

Making Changes to Site Content

document.body.textContent = "We've just changed everything. Hit the refresh button to get the article back :)"

Updating Individual Content Elements

document.querySelectorAll(['p', 'li', 'a', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
document.querySelectorAll(['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'span']).forEach(contentType => { contentType.textContent = "Changed this! Hit the refresh button to get back the original. :)"; });

Superpowers for your mouse

document.querySelectorAll(['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'span']).forEach(contentType => { contentType.setAttribute('onmouseover', "this.style.transform = 'rotate(360deg)'"); contentType.setAttribute('style', "transition: all 1s linear"); });

Now you see it…

document.querySelectorAll(['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'span']).forEach(contentType => { contentType.setAttribute('onmouseover', "this.style.opacity = '0'"); contentType.setAttribute('style', "transition: all .5s ease-out"); });

--

--

--

Learn to Code. Get a Job. Start Here! Learn more at www.codefellows.org

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Arduino basics controlling an led

Inside PixiJS’s high-performance update loop

Personal Development Days November 2017

Displaying Errors Without An Alert Box in JavaScript

The Power of the Observer Pattern in JavaScript

TrustBase Grant is formally established|Project weekly report (4.20–4.26)

Vim Minute #1

Javascript Algorithms and Data Structures Challenge: Day 7

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Code Fellows

Code Fellows

Learn to Code. Get a Job. Start Here! Learn more at www.codefellows.org

More from Medium

Using esbuild with rails 7 in a simple way

Const myFirstJavascriptBlog = “Declaring Variables”

How to Use the Union Operator to Create Mixed Type Arrays in TypeScript

ClientServerOverview