JavaScript - Getting to know the DOM - Interacting with Your Web Page(Finding inner HTML, textContent, document, querySelector, id)

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. 3810)を取り組んでみる。

SHARPEN YOUR PENCIL(No. 3810)

コード(Emacs)

HTML5

<h1 id="e1">The</h1>
<p>
  <time id="e2">time</time> has come
</p>
<h2 id="e3">It ain't</h2>
<div id="e4">
  <p id="e5">braggin'</p>
  <p><span id="e6">if</span> <span id="e7">you</span> <span id="e8">can</span></p>
  <p id="e9">back</p>
  <p id="e10">it up!</p>    
</div>
<div id="e11">
  I'm <em id="e12">not</em> funny <strong id="e13">but</strong> I do <strong id="e14"> lough</strong> a lot
</div>
<ul>
  <li id="e15">Please</li>
  <li id="e16">turn</li>
  <li id="e17">the</li>
  <li id="e18">pages</li>
  <li id="e19">one at a time</li>
</ul>
<pre id="output0"></pre>
<button id="run0">run</button>
<button id="clear0">clear</button>

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

JavaScript

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


let nums = [7, 8, 16, 9, 18, 13, 12, 2];

let output = () => {
    p(
        nums.map((n) => document.querySelector(`#e${n}`).textContent)
            .join(' ')
    );
};
btn0.onclick = output;
btn1.onclick = () => pre0.textContent = '';

output();

The

time has come

It ain't

braggin'

if you can

back

it up!

I'm not funny but I do lough a lot

• Please
• turn
• the
• pages
• one at a time