JavaScript в браузере: DOM и события

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>DOM: первые шаги</title>
  <script src="select.js" defer></script>
</head>
<body>
  <h1>Задачи на сегодня</h1>
  <ul id="task-list">
    <li class="task">Купить зёрна</li>
    <li class="task done">Почистить кофемашину</li>
  </ul>
  <p id="status" hidden>Все задачи выполнены</p>
  <button type="button" id="add">Добавить задачу</button>
</body>
</html>

// Первый подходящий элемент — или null, если такого нет
const title = document.querySelector("h1");
console.log(title.textContent);                    // → Задачи на сегодня
console.log(document.querySelector(".missing"));   // → null

// Все подходящие элементы — статический список NodeList
const tasks = document.querySelectorAll("#task-list .task");
console.log(tasks.length);                         // → 2
tasks.forEach((task) => console.log(task.textContent)); // → Купить зёрна, затем Почистить кофемашину

// От элемента можно идти по дереву вверх и вниз
const list = tasks[0].parentElement;
console.log(list.id, list.children.length);        // → task-list 2
console.log(document.querySelector(".done").textContent); // → Почистить кофемашину

const list = document.querySelector("#task-list");
const [first, second] = list.querySelectorAll(".task");

// Текст
first.textContent = "Купить зёрна для эспрессо";
console.log(first.textContent);                    // → Купить зёрна для эспрессо

// Классы
first.classList.add("urgent");
second.classList.remove("done");
console.log(first.className);                      // → task urgent
console.log(second.classList.toggle("done"));      // → true
console.log(second.classList.contains("done"));    // → true

// Атрибуты и data-атрибуты
first.setAttribute("title", "Срок — сегодня");
first.dataset.priority = "high";                   // в HTML: data-priority="high"
console.log(first.outerHTML); // → <li class="task urgent" title="Срок — сегодня" data-priority="high">Купить зёрна для эспрессо</li>

// Свойство hidden показывает и скрывает элемент
const statusNote = document.querySelector("#status");
statusNote.hidden = false;

// Новый элемент: создать, заполнить, вставить
const item = document.createElement("li");
item.className = "task";
item.textContent = "Позвонить мастеру";
list.append(item);
console.log(list.children.length);                 // → 3

// textContent не разбирает HTML — разметка из ввода остаётся текстом
const userInput = "<b>Срочно</b>";
item.textContent = userInput;
console.log(item.children.length);                 // → 0
item.innerHTML = userInput;                        // так с вводом пользователя нельзя
console.log(item.children.length);                 // → 1

item.remove();
console.log(list.children.length);                 // → 2

const button = document.querySelector("#add");
let clicks = 0;

button.addEventListener("click", (event) => {
  clicks++;
  console.log(event.type, event.target.id, clicks); // → click add 1, после второго клика — click add 2
});

// Обработчик срабатывает один раз и удаляется сам
button.addEventListener("click", () => console.log("первый клик"), { once: true });

function logClick(event) {
  console.log(`${event.currentTarget.tagName}: target = ${event.target.tagName}`);
}

document.body.addEventListener("click", logClick);
document.querySelector("#task-list").addEventListener("click", logClick);
document.querySelector(".task").addEventListener("click", logClick);

// Клик по первой задаче выведет:
// LI: target = LI
// UL: target = LI
// BODY: target = LI

form.addEventListener("submit", (event) => {
  event.preventDefault();                  // без перезагрузки страницы
  const data = new FormData(form);
  const title = String(data.get("title")).trim();
  if (title === "") return;                // строка из одних пробелов

  list.append(createTask(title));
  form.reset();
  input.focus();
  renderCounter();
});

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Список задач</title>
  <style>
    .done span { text-decoration: line-through; color: #6b7280; }
  </style>
  <script src="app.js" defer></script>
</head>
<body>
  <main>
    <h1>Список задач</h1>
    <form id="task-form">
      <label for="task-title">Новая задача</label>
      <input id="task-title" name="title" type="text" autocomplete="off" required>
      <button type="submit">Добавить</button>
    </form>
    <ul id="task-list"></ul>
    <p id="task-counter" aria-live="polite"></p>
  </main>
</body>
</html>

const form = document.querySelector("#task-form");
const input = document.querySelector("#task-title");
const list = document.querySelector("#task-list");
const counter = document.querySelector("#task-counter");

function renderCounter() {
  const left = list.querySelectorAll("li:not(.done)").length;
  counter.textContent = `Осталось задач: ${left}`;
}

function createTask(title) {
  const item = document.createElement("li");

  const text = document.createElement("span");
  text.textContent = title;                // ввод пользователя — только как текст

  const toggle = document.createElement("button");
  toggle.type = "button";
  toggle.dataset.action = "toggle";
  toggle.setAttribute("aria-pressed", "false");
  toggle.textContent = "Готово";

  const remove = document.createElement("button");
  remove.type = "button";
  remove.dataset.action = "remove";
  remove.textContent = "Удалить";

  item.append(text, " ", toggle, " ", remove);
  return item;
}

form.addEventListener("submit", (event) => {
  event.preventDefault();                  // без перезагрузки страницы
  const data = new FormData(form);
  const title = String(data.get("title")).trim();
  if (title === "") return;                // строка из одних пробелов

  list.append(createTask(title));
  form.reset();
  input.focus();
  renderCounter();
});

// Один обработчик на весь список — делегирование событий
list.addEventListener("click", (event) => {
  const button = event.target.closest("button[data-action]");
  if (!button) return;                     // клик мимо кнопок
  const item = button.closest("li");

  if (button.dataset.action === "toggle") {
    const isDone = item.classList.toggle("done");
    button.setAttribute("aria-pressed", String(isDone));
  }
  if (button.dataset.action === "remove") {
    item.remove();
  }
  renderCounter();
});

renderCounter();