document.getElementById: 하나의 요소를 가져와서 변경합니다.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>getElementById: read and change elements</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .card { background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
  label { font-size: 13px; color: #5b6270; }
  input { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 10px; padding: 8px 10px;
          font: inherit; border: 1px solid #c9cdd4; border-radius: 8px; }
  #greeting { margin: 0; padding: 10px; border-radius: 8px; background: #eef1f5; font-weight: 600; }
  #greeting.highlight { background: #fde68a; }
  .buttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
  button { font: inherit; font-size: 13px; padding: 7px 10px; border: 0; border-radius: 8px;
           background: #1d4ed8; color: #fff; cursor: pointer; }
  #code { margin: 0; padding: 10px; border-radius: 8px; background: #1d2330; color: #d1fae5;
          font: 12.5px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; min-height: 38px; }
</style>
</head>
<body>
<div class="card">
  <label for="name">Your name</label>
  <input id="name" value="Sam">
  <p id="greeting">Hello!</p>

  <div class="buttons">
    <button id="read">Read .value</button>
    <button id="text">Set .textContent</button>
    <button id="style">Set .style</button>
    <button id="toggle">Toggle a class</button>
    <button id="clear">Clear .value</button>
  </div>

  <pre id="code">Press a button to see the line it runs.</pre>
</div>

<script>
  // Grab each element once, by its id (no '#')
  const nameInput = document.getElementById('name');
  const greeting = document.getElementById('greeting');
  const code = document.getElementById('code');

  // Show the line that ran and what it returned
  function show(line, result) {
    code.textContent = line + (result === undefined ? '' : '\n// → ' + result);
  }

  document.getElementById('read').addEventListener('click', () => {
    show("document.getElementById('name').value", JSON.stringify(nameInput.value));
  });

  document.getElementById('text').addEventListener('click', () => {
    greeting.textContent = 'Hello, ' + nameInput.value + '!';
    show("greeting.textContent = 'Hello, ' + nameInput.value + '!';");
  });

  document.getElementById('style').addEventListener('click', () => {
    const next = greeting.style.color ? '' : '#b91c1c';  // toggle red on and off
    greeting.style.color = next;
    show("greeting.style.color = '" + next + "';");
  });

  document.getElementById('toggle').addEventListener('click', () => {
    const on = greeting.classList.toggle('highlight');
    show("greeting.classList.toggle('highlight');", on);
  });

  document.getElementById('clear').addEventListener('click', () => {
    nameInput.value = '';
    nameInput.focus();
    show("nameInput.value = '';");
  });
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Why getElementById returns null</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  #target { margin: 0 0 12px; padding: 10px; border-radius: 8px; background: #fff; border: 1px dashed #9aa3b2; font-size: 14px; }
  .row { background: #fff; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
         border-left: 5px solid #9aa3b2; font-size: 13px; }
  .row.bad { border-left-color: #c2410c; background: #fff7f5; }
  .row.good { border-left-color: #15803d; background: #f4fbf6; }
  .row b { display: block; margin-bottom: 3px; }
  .row code { font: 12px/1.45 ui-monospace, Consolas, monospace; word-break: break-word; }
</style>
<script>
  // Each test reports here. The list is drawn once the page has a place for it.
  const results = [];
  function report(where, el, error) {
    results.push({ where, el, error });
    const out = document.getElementById('out');
    if (out) draw(out);
  }
  function draw(out) {
    out.innerHTML = '';
    results.sort((a, b) => a.where.localeCompare(b.where));  // show 1-4 in order
    for (const r of results) {
      const row = document.createElement('div');
      row.className = 'row ' + (r.el ? 'good' : 'bad');
      const title = document.createElement('b');
      title.textContent = r.where;
      const line = document.createElement('code');
      line.textContent = r.el
        ? 'Found <' + r.el.tagName.toLowerCase() + ' id="target">'
        : 'null → ' + r.error;
      row.append(title, line);
      out.append(row);
    }
  }
</script>

<!-- 1. Plain script in the head: the element does not exist yet -->
<script>
  try {
    const el = document.getElementById('target');
    el.textContent = 'changed';  // throws, because el is null
    report('1. <script> in <head>', el);
  } catch (e) {
    report('1. <script> in <head>', null, e.name + ': ' + e.message);
  }
</script>

<!-- 2. defer on an inline script is ignored: still null -->
<script defer>
  try {
    const el = document.getElementById('target');
    el.textContent = 'changed';
    report('2. <script defer> in <head>, inline', el);
  } catch (e) {
    report('2. <script defer> in <head>, inline', null, e.name + ': ' + e.message);
  }
</script>

<!-- 3. Wait for the page to be parsed -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const el = document.getElementById('target');
    report('3. <head> + DOMContentLoaded', el);
  });
</script>
</head>
<body>
<p id="target">I am &lt;p id="target"&gt;, written after the head scripts.</p>
<div id="out"></div>

<!-- 4. Script placed after the element -->
<script>
  report('4. <script> after the element', document.getElementById('target'));
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tip calculator</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .calc { max-width: 380px; margin: 0 auto; background: #fff; border-radius: 14px; padding: 16px;
          box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
  h2 { margin: 0 0 12px; font-size: 18px; }
  label { display: block; font-size: 13px; color: #5b6270; margin-top: 10px; }
  input[type=number] { width: 100%; box-sizing: border-box; margin-top: 4px; padding: 9px 10px;
                       font: inherit; font-size: 16px; border: 1px solid #c9cdd4; border-radius: 8px; }
  input[type=number].invalid { border-color: #c2410c; background: #fff7f5; }
  input[type=range] { width: 100%; margin-top: 6px; }
  .out { margin-top: 14px; border-radius: 10px; background: #f4fbf6; padding: 12px; display: grid;
         grid-template-columns: 1fr auto; gap: 6px; font-size: 14px; }
  .out b { text-align: right; }
  .out .big { font-size: 20px; color: #0f5132; }
</style>
</head>
<body>
<div class="calc">
  <h2>Tip calculator</h2>

  <label for="bill">Bill</label>
  <input id="bill" type="number" min="0" step="0.01" value="84.50" inputmode="decimal">

  <label for="tip">Tip: <span id="tipLabel">15</span>%</label>
  <input id="tip" type="range" min="0" max="30" value="15">

  <label for="people">People</label>
  <input id="people" type="number" min="1" step="1" value="3" inputmode="numeric">

  <div class="out">
    <span>Tip</span><b id="tipAmount"></b>
    <span>Total</span><b id="total"></b>
    <span>Each person pays</span><b id="each" class="big"></b>
  </div>
</div>

<script>
  // Look up every element once
  const bill = document.getElementById('bill');
  const tip = document.getElementById('tip');
  const people = document.getElementById('people');
  const tipLabel = document.getElementById('tipLabel');
  const tipAmount = document.getElementById('tipAmount');
  const total = document.getElementById('total');
  const each = document.getElementById('each');

  const money = (n) => n.toFixed(2);

  function update() {
    // .value is always a string, so turn it into a number first
    const b = Number(bill.value);
    const pct = Number(tip.value);
    const n = Math.floor(Number(people.value));

    tipLabel.textContent = pct;

    const ok = bill.value !== '' && b >= 0 && n >= 1;
    bill.classList.toggle('invalid', !(bill.value !== '' && b >= 0));
    people.classList.toggle('invalid', !(n >= 1));
    if (!ok) {
      tipAmount.textContent = total.textContent = each.textContent = '-';
      return;
    }

    const t = b * pct / 100;
    tipAmount.textContent = money(t);
    total.textContent = money(b + t);
    each.textContent = money((b + t) / n);
  }

  // 'input' fires on every keystroke and every slider move
  for (const el of [bill, tip, people]) el.addEventListener('input', update);
  update();
</script>
</body>
</html>