DOM: поиск и изменение элементов

<ul>
  <li>Нон</li>
  <li>Сомса</li>
  <li>Чой</li>
  <li>Мева</li>
</ul>

const list = document.body.firstElementChild; // это <ul>

// 1) сколько детей у списка
// 2) текст первого ребёнка
// 3) текст последнего ребёнка

<div class="group">
  <h2>Группа JS-12</h2>
  <p>Преподаватель: Шахром</p>
  <p>Студентов: 12</p>
</div>

const group = document.body.firstElementChild;
const title = group.firstElementChild;

console.log(title.tagName);
console.log(title.nextElementSibling.textContent);
console.log(title.nextElementSibling.nextElementSibling.textContent);
console.log(title.parentElement.tagName);
console.log(group.children.length);

// шестая строка — ваша

<ul>
  <li>Душанбе</li>
  <li>Худжанд</li>
  <li>Бохтар</li>
</ul>

const list = document.body.firstElementChild;

// childNodes.length
// children.length
// цикл for...of по list.children — вывести текст каждого города

<h1 id="title">Чайхона «Сомон»</h1>
<ul class="menu">
  <li class="item">Курутоб</li>
  <li class="item">Оши палав</li>
  <li class="item hot">Шакароб</li>
</ul>

// 1) текст заголовка по id
// 2) текст первого .item
// 3) сколько всего .item

<h1 id="title">Корзина</h1>
<ul id="cart">
  <li class="item">Нон — 4</li>
  <li class="item">Молоко — 12</li>
  <li class="item sale">Зардолу — 25</li>
</ul>

const title = document.querySelector(".title");   // 1
const items = document.querySelector(".item");    // 2
const sale = document.querySelector("#sale");     // 3

console.log(title.textContent);
console.log(items.length);
console.log(sale.textContent);

<div class="card"><span class="name">Шапка</span> <span class="price">60</span></div>
<div class="card"><span class="name">Шарф</span> <span class="price">45</span></div>
<div class="card"><span class="name">Перчатки</span> <span class="price">35</span></div>
<div class="card"><span class="name">Носки</span> <span class="price">15</span></div>

const cards = document.querySelectorAll(".card");

let total = 0;
let maxPrice = 0;
let maxName = "";

// переберите cards: достаньте name и price, обновите total, maxPrice, maxName

console.log("Итого: " + total + " сомони");
console.log("Самый дорогой: " + maxName);

<h1 id="title">Загрузка…</h1>
<p class="price">0 сомони</p>

const title = document.querySelector("#title");
const price = document.querySelector(".price");

// замените тексты

console.log(title.textContent);
console.log(price.textContent);

<div id="a"></div>
<div id="b"></div>

const userName = "Ali <b>Pro</b>";
const a = document.querySelector("#a");
const b = document.querySelector("#b");

// в a — через innerHTML, в b — через textContent

console.log(a.children.length);
console.log(b.children.length);
console.log(b.textContent);

<ul id="menu"></ul>

const dishes = ["Самбуса", "Курутоб", "Шакароб"];
const menu = document.querySelector("#menu");

// соберите строку и положите в menu

console.log(menu.children.length);
console.log(menu.innerHTML);

<ul class="menu">
  <li class="item">Самбуса</li>
  <li class="item">Курутоб</li>
  <li class="item old">Шакароб</li>
</ul>

.item { padding: 6px 10px; margin: 4px 0; border-radius: 8px; background: #eef1f6; list-style: none; }
.hot { background: #ffd9a8; font-weight: 700; }
.old { opacity: .5; text-decoration: line-through; }

const items = document.querySelectorAll(".item");

// items[1] — «Курутоб»: добавить класс hot
// items[2] — «Шакароб»: убрать класс old

for (const item of items) {
  console.log(item.className);
}

<div id="panel" class="panel open">Меню</div>

const panel = document.querySelector("#panel");

// 1) вывести panel.classList.contains("open")
// 2) toggle("open") и снова вывести contains
// 3) ещё раз toggle("open"), toggle("dark") и вывести panel.className

<a id="link" href="https://example.com">Сайт</a>
<button id="buy" data-id="17" data-price="35">Купить</button>

const link = document.querySelector("#link");
const buy = document.querySelector("#buy");

// 1) setAttribute("href", ...) и вывести getAttribute("href")
// 2) вывести Number(buy.dataset.price) * 2
// 3) buy.dataset.id = "18" и вывести getAttribute("data-id")
// 4) buy.disabled = true и вывести hasAttribute("disabled")

<div class="card" data-price="60">Шапка</div>
<div class="card" data-price="45">Шарф</div>
<div class="card" data-price="35">Перчатки</div>
<div class="card" data-price="15">Носки</div>

.card { display: inline-block; padding: 10px 14px; margin: 4px; border: 2px solid #ccd3df; border-radius: 10px; }
.expensive { border-color: #c98a00; background: #fff3d6; }
.sale { border-color: #1a9a5a; background: #dff6e8; }

const cards = document.querySelectorAll(".card");

for (const card of cards) {
  const price = Number(card.dataset.price);
  // добавьте нужный класс

  console.log(card.className);
}

// сколько карточек с классом expensive

<ul id="menu"></ul>

const menu = document.querySelector("#menu");

// создайте li, задайте текст, вставьте в menu

console.log(menu.children.length);
console.log(menu.textContent);

<ul id="menu"></ul>

const dishes = ["Нон", "Сомса", "Чой"];
const menu = document.querySelector("#menu");

// цикл по dishes: создать li, текст, класс item, вставить

console.log(menu.children.length);
console.log(menu.lastElementChild.textContent);
console.log(menu.firstElementChild.className);

<ul id="line">
  <li>Алия</li>
  <li class="old">Бахром</li>
  <li>Умар</li>
</ul>

const line = document.querySelector("#line");
const alia = line.firstElementChild;

function make(text) {
  const li = document.createElement("li");
  li.textContent = text;
  return li;
}

// 1) удалить .old
// 2) prepend: Зарина
// 3) after: Далер после alia
// 4) append: Нилуфар

console.log(Array.from(line.children, li => li.textContent).join(", "));

<ul id="left">
  <li>Самбуса</li>
  <li>Курутоб</li>
  <li>Шакароб</li>
</ul>
<ul id="right"></ul>

const left = document.querySelector("#left");
const right = document.querySelector("#right");

right.append(left.firstElementChild);                      // переезд
console.log(left.children.length, right.children.length);

const clone = left.firstElementChild.cloneNode(true);
// допишите к тексту клона " (копия)"
right.append(clone);
console.log(left.children.length, right.children.length);

// выведите текст последнего элемента правого списка

<ul id="list"></ul>

const products = [
  { title: "Нон", price: 4 },
  { title: "Молоко", price: 12 },
  { title: "Зардолу", price: 25 },
  { title: "Мёд", price: 80 }
];
const list = document.querySelector("#list");

function createItem(product) {
  // создайте li, задайте текст, верните li
}

list.replaceChildren(...products.map(createItem));

console.log(list.children.length);
console.log(list.firstElementChild.textContent);

<div id="catalog"></div>

const products = [
  { title: "Нон", price: 4 },
  { title: "Чапан", price: 450 },
  { title: "Пиала", price: 30 }
];
const catalog = document.querySelector("#catalog");

function render(items) {
  // ваш код
}

render(products);
console.log(catalog.children.length);

render(products.filter(p => p.price < 50));
console.log(catalog.children.length);

render(products.filter(p => p.price > 1000));
console.log(catalog.children.length);
console.log(catalog.textContent);

<div id="catalog"></div>

.card { display: inline-block; border: 2px solid #ccd3df; border-radius: 12px; padding: 8px 12px; margin: 4px; }
.card h3 { margin: 0; font-size: 16px; }
.out { opacity: .45; border-style: dashed; }

const products = [
  { title: "Шапка", price: 60, inStock: true },
  { title: "Шарф", price: 45, inStock: true },
  { title: "Перчатки", price: 35, inStock: false },
  { title: "Носки", price: 15, inStock: true }
];
const catalog = document.querySelector("#catalog");

function createCard({ title, price, inStock }) {
  // ваш код — верните card
}

catalog.replaceChildren(...products.map(createCard));

console.log(catalog.querySelectorAll(".card").length);
console.log(catalog.querySelectorAll(".out").length);
console.log(catalog.querySelector(".price").textContent);

<div id="catalog"></div>

const products = [
  { title: "Нон", category: "Продукты" },
  { title: "Зардолу", category: "Продукты" },
  { title: "Пиала", category: "Кухня" },
  { title: "Чапан", category: "Сувениры" },
  { title: "Тюбетейка", category: "Сувениры" }
];
const catalog = document.querySelector("#catalog");

// 1) groups = { Продукты: ["Нон", "Зардолу"], Кухня: ["Пиала"], ... } через reduce
// 2) для каждой пары [category, titles] создать section > h3 + ul > li
// 3) вставить все section в catalog

const sections = catalog.querySelectorAll("section");
console.log(sections.length);
for (const section of sections) {
  console.log(section.querySelector("h3").textContent + ": " + section.querySelectorAll("li").length);
}

<div id="catalog" class="catalog"></div>

const products = [
  { title: "Чапан", price: 450 },
  { title: "Тюбетейка", price: 120 }
];

const catalog = document.querySelector(".catalogue");
const card = document.createElement("article");
card.className = "card";

products.forEach(p => {
  card.innerHTML = `<h3>${p.title}</h3><p class="price">${p.price}</p>`;
  catalog.append(card);
});

console.log(catalog.children.length);
console.log(catalog.firstElementChild.querySelector("h3").textContent);
console.log(catalog.firstElementChild.querySelector(".price").textContent);

<header class="shop__head">
  <h2 class="shop__title">Магазин «Бозор»</h2>
  <button id="clear" class="shop__btn">Очистить</button>
</header>
<div id="catalog" class="catalog"></div>

/* CSS от ИИ — готовый */
.shop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shop__title { margin: 0; font-size: 20px; }
.shop__btn { border: 2px solid #1c2230; background: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 700; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.product-card { position: relative; border: 2px solid #ccd3df; border-radius: 14px; padding: 10px 12px; background: #fff; }
.product-card__title { margin: 0 0 4px; font-size: 16px; }
.product-card__price { margin: 0; color: #1a7f4e; font-weight: 700; }
.product-card__badge { position: absolute; top: -8px; right: 8px; background: #c98a00; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.product-card--out { opacity: .5; border-style: dashed; }
.product-card--hit { border-color: #c98a00; }
.shop__stats { color: #6b7488; margin: 0 0 12px; }

const products = [
  { title: "Самбуса", price: 5, category: "Еда", inStock: true, rating: 4.9 },
  { title: "Курутоб", price: 35, category: "Еда", inStock: true, rating: 4.8 },
  { title: "Шакароб", price: 15, category: "Еда", inStock: true, rating: 4.2 },
  { title: "Оши палав", price: 30, category: "Еда", inStock: false, rating: 4.7 },
  { title: "Нон", price: 4, category: "Еда", inStock: true, rating: 4.5 },
  { title: "Чапан", price: 450, category: "Одежда", inStock: true, rating: 4.8 },
  { title: "Тюбетейка", price: 120, category: "Одежда", inStock: true, rating: 4.6 },
  { title: "Пиала", price: 30, category: "Кухня", inStock: true, rating: 4.4 },
  { title: "Чайник", price: 85, category: "Кухня", inStock: false, rating: 4.1 },
  { title: "Шарф", price: 45, category: "Одежда", inStock: true, rating: 4.3 }
];

const catalog = document.querySelector("#catalog");
const clearBtn = document.querySelector("#clear");

function createCard(product) {
  // article.product-card > h3.product-card__title + p.product-card__price
  // если нет в наличии — добавить класс product-card--out
}

function render(items) {
  // очистить catalog и вставить карточки
}

// кнопка очистки через onclick

// --- проверка (не удаляйте) ---
render(products);
console.log(catalog.children.length);
console.log(catalog.querySelectorAll(".product-card--out").length);
clearBtn.click();
console.log(catalog.children.length);
render(products);
console.log(catalog.children.length);

<header class="shop__head">
  <h2 class="shop__title">Магазин «Бозор»</h2>
  <button id="clear" class="shop__btn">Очистить</button>
</header>
<p id="stats" class="shop__stats"></p>
<div id="catalog" class="catalog"></div>

.shop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shop__title { margin: 0; font-size: 20px; }
.shop__btn { border: 2px solid #1c2230; background: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 700; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px 10px; }
.product-card { position: relative; border: 2px solid #ccd3df; border-radius: 14px; padding: 10px 12px; background: #fff; }
.product-card__title { margin: 0 0 4px; font-size: 16px; }
.product-card__price { margin: 0; color: #1a7f4e; font-weight: 700; }
.product-card__badge { position: absolute; top: -8px; right: 8px; background: #c98a00; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.product-card--out { opacity: .5; border-style: dashed; }
.product-card--hit { border-color: #c98a00; }
.shop__stats { color: #6b7488; margin: 0 0 12px; }

const products = [
  { title: "Самбуса", price: 5, category: "Еда", inStock: true, rating: 4.9 },
  { title: "Курутоб", price: 35, category: "Еда", inStock: true, rating: 4.8 },
  { title: "Шакароб", price: 15, category: "Еда", inStock: true, rating: 4.2 },
  { title: "Оши палав", price: 30, category: "Еда", inStock: false, rating: 4.7 },
  { title: "Нон", price: 4, category: "Еда", inStock: true, rating: 4.5 },
  { title: "Чапан", price: 450, category: "Одежда", inStock: true, rating: 4.8 },
  { title: "Тюбетейка", price: 120, category: "Одежда", inStock: true, rating: 4.6 },
  { title: "Пиала", price: 30, category: "Кухня", inStock: true, rating: 4.4 },
  { title: "Чайник", price: 85, category: "Кухня", inStock: false, rating: 4.1 },
  { title: "Шарф", price: 45, category: "Одежда", inStock: true, rating: 4.3 }
];

const catalog = document.querySelector("#catalog");
const clearBtn = document.querySelector("#clear");
const stats = document.querySelector("#stats");

function createCard(product) {
  const card = document.createElement("article");
  card.className = "product-card";
  if (!product.inStock) card.classList.add("product-card--out");

  const title = document.createElement("h3");
  title.className = "product-card__title";
  title.textContent = product.title;

  const price = document.createElement("p");
  price.className = "product-card__price";
  price.textContent = `${product.price} сомони`;

  card.append(title, price);
  // 1) для rating >= 4.8: класс product-card--hit и span.product-card__badge «Хит»
  return card;
}

function render(items) {
  catalog.replaceChildren(...items.map(createCard));
  // 2) stats.textContent = "Хитов: N из M"
}

clearBtn.onclick = () => catalog.replaceChildren();

render(products);
console.log(catalog.querySelectorAll(".product-card--hit").length);
console.log(stats.textContent);