JavaScript - Getting to know the DOM - Interacting with Your Web Page(class, setAttribute, style, color)

Head First JavaScript Programming

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Safari(Web browser)

Head First JavaScript Programming (Eric T. Freeman (著)、Elisabeth Robson (著)、O'Reilly Media)の Chapter 6.(Getting to know the DOM - Interacting with Your Web Page)の SHARPEN YOUR PENCIL(No. 3896)を取り組んでみる。

SHARPEN YOUR PENCIL(No. 3896)

コード(Emacs)

HTML5

<h1>Green Planet</h1>
<p id="greenplanet">All is well</p>
<h1>Red Planet</h1>
<p id="redplanet">Nothing to report</p>
<h1>Blue Planet</h1>
<p id="blueplanet">All system A-OK</p>

<pre id="output0"></pre>
<button id="run0">run</button>
<button id="clear0">clear</button>

<script src="sample3.js"></script>

JavaScript

let btn0 = document.querySelector('#run0'),
    btn1 = document.querySelector('#clear0'),
    pre0 = document.querySelector('#output0'),
    p = (x) => pre0.textContent += x + '\n';

let planet = document.querySelector('#greenplanet');

planet.textContent = 'Red Alert: hit by phaser fire!';
planet.setAttribute('class', 'redtext');

let output = () => {
    document.querySelectorAll('.redtext')
        .forEach((elm) => elm.style.color = 'red');
};

btn0.onclick = output;
btn1.onclick = () => {
    document.querySelectorAll('.redtext')
        .forEach((elm) => elm.style.color = 'black');
};

output();

Green Planet

All is well

Red Planet

Nothing to report

Blue Planet

All system A-OK