Drzewo DOM: createElement i appendChild

Praktyka: kalendarz - JavaScript od podstaw: konsola (HTML/CSS/JS)

Strona to drzewo elementów: `<table>` jest RODZICEM wierszy `<tr>`, a każdy wiersz rodzicem komórek `<td>` (jego DZIECI). Zamiast napisu z kodem budujemy to drzewo wprost: `document.createElement('td')` tworzy element (jeszcze go nie widać), `textContent` ustawia jego tekst (bezpiecznie, bez interpretowania HTML), a `rodzic.appendChild(dziecko)` podpina dziecko na końcu rodzica. Dopiero podpięcie tabeli do elementu, który już jest na stronie, pokazuje ją. Pod kalendarzem skrypt wypisuje, co wie o drzewie: liczbę dzieci tabeli, rodzica pierwszej komórki i pierwsze dziecko wiersza.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Kalendarz: drzewo DOM</title>
  <style>
    table { border-collapse: collapse; font-family: sans-serif; }
    th, td { border: 1px solid #94a3b8; width: 2.5em; height: 2em; text-align: center; }
    th { background: #e0e7ff; color: #1e1b4b; }
  </style>
</head>
<body>
  <h1>Listopad 2026</h1>
  <div id="calendar"></div>
  <p id="info"></p>
  <script>
    const MONTHS = ['styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec',
      'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień'];
    const DAYS = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd'];
    function buildWeeks(year, month) {
      const first = (new Date(year, month - 1, 1).getDay() + 6) % 7;
      const days = new Date(year, month, 0).getDate();
      const cells = [];
      for (let i = 0; i < first; i++) cells.push(null);
      for (let d = 1; d <= days; d++) cells.push(d);
      while (cells.length % 7 !== 0) cells.push(null);
      const weeks = [];
      for (let i = 0; i < cells.length; i += 7) {
        weeks.push(cells.slice(i, i + 7));
      }
      return weeks;
    }
    function renderTable(year, month) {
      const table = document.createElement('table');
      const head = document.createElement('tr');
      for (const name of DAYS) {
        const th = document.createElement('th');
        th.textContent = name;
        head.appendChild(th);
      }
      table.appendChild(head);
      for (const week of buildWeeks(year, month)) {
        const tr = document.createElement('tr');
        for (const day of week) {
          const td = document.createElement('td');
          td.textContent = day === null ? '' : day;
          tr.appendChild(td);
        }
        table.appendChild(tr);
      }
      return table;
    }
    const box = document.getElementById('calendar');
    const table = renderTable(2026, 11);
    box.appendChild(table);

    const firstRow = table.children[1];
    const td = firstRow.children[6];
    document.getElementById('info').textContent =
      'Tabela ma ' + table.children.length + ' wierszy (dzieci). ' +
      'Rodzic komórki z jedynką: ' + td.parentElement.tagName + '. ' +
      'Pierwsze dziecko tego wiersza jest puste: "' + firstRow.firstElementChild.textContent + '".';
  </script>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu JavaScript od podstaw: konsola·Zaloguj się, aby zapisać postęp na koncie.