Elemente auswählen und ändern

const task = document.querySelector('#tasks li');
task.classList.add('done');

// TODO: mark every finished task, then count them for the summary.
document.querySelector('#summary').textContent = '1 of 1 done';

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';

const marked = (page) => [...page.document.querySelectorAll('#tasks li')].map((li) => li.classList.contains('done'));

test('Jede erledigte Aufgabe hat die Klasse done', async () => {
  const page = await loadPage();
  const got = marked(page);
  assert.equal(got[0] && got[2], true, 'die Klasse done steht an diesen Aufgaben: ' + JSON.stringify(got) + ', erwartet an der 1. und 3.');
});

test('Offene Aufgaben bekommen die Klasse done nicht', async () => {
  const page = await loadPage();
  const got = marked(page);
  assert.deepEqual(got, [true, false, true, false], 'die Klasse done steht an diesen Aufgaben: ' + JSON.stringify(got));
});

test('Die Zusammenfassung lautet 2 of 4 done', async () => {
  const page = await loadPage();
  const text = page.document.querySelector('#summary').textContent;
  assert.equal(text, '2 of 4 done', 'die Zusammenfassung lautet ' + JSON.stringify(text));
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Today</title>
</head>
<body>
  <h1>Today</h1>
  <ul id="tasks">
    <li data-done="yes">Buy milk</li>
    <li data-done="no">Call Ada</li>
    <li data-done="yes">Water the plants</li>
    <li data-done="no">Book tickets</li>
  </ul>
  <p id="summary"></p>
  <script type="module" src="main.js"></script>
</body>
</html>

{
  "type": "module"
}

// Values a user typed into a sign-up form: treat them as text.
const profile = { name: 'Ada Lovelace', bio: 'I love <b>maths</b>', role: 'admin', photo: 'ada.png' };

const card = document.querySelector('#card');
document.querySelector('#name').innerHTML = profile.name;
document.querySelector('#bio').innerHTML = profile.bio;
// TODO: the photo and its alt text, data-role, and the class admin.

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';

test('Die Bio erscheint als Text, nicht als HTML', async () => {
  const page = await loadPage();
  const bio = page.document.querySelector('#bio');
  assert.equal(bio.children.length, 0, 'die Bio enthält ' + bio.children.length + ' aus dem Text gebaute(s) Element(e), erwartet keines');
  assert.equal(bio.textContent, 'I love <b>maths</b>', 'die Bio zeigt ' + JSON.stringify(bio.textContent));
});

test('Der Name wird angezeigt', async () => {
  const page = await loadPage();
  const text = page.document.querySelector('#name').textContent;
  assert.equal(text, 'Ada Lovelace', 'der Name zeigt ' + JSON.stringify(text));
});

test('Das Foto hat src und Alternativtext', async () => {
  const page = await loadPage();
  const photo = page.document.querySelector('#photo');
  assert.equal(photo.getAttribute('src'), 'ada.png', 'src ist ' + JSON.stringify(photo.getAttribute('src')));
  assert.equal(photo.getAttribute('alt'), 'Photo of Ada Lovelace', 'alt ist ' + JSON.stringify(photo.getAttribute('alt')));
});

test('Die Karte hat data-role und die Klassen card und admin', async () => {
  const page = await loadPage();
  const card = page.document.querySelector('#card');
  assert.equal(card.getAttribute('data-role'), 'admin', 'data-role ist ' + JSON.stringify(card.getAttribute('data-role')));
  assert.equal(card.classList.contains('admin'), true, 'die Karte hat keine Klasse admin');
  assert.equal(card.classList.contains('card'), true, 'die Karte hat ihre Klasse card verloren');
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Profile</title>
</head>
<body>
  <article id="card" class="card">
    <img id="photo" src="blank.png" alt="">
    <h2 id="name">Name</h2>
    <p id="bio"></p>
  </article>
  <script type="module" src="main.js"></script>
</body>
</html>

{
  "type": "module"
}