Вивчайте Завдання: Запит і Вибір Елементів DOM | Маніпулювання DOM для Інтерактивної Веб-Розробки

Завдання

У вашому HTML знаходиться список покупок, і необхідно вибрати певні елементи за допомогою різних методів запиту DOM.

Вибір за ID: Вибрати елемент <h1> з ID title;
Вибір за класом: Вибрати всі елементи з класом item;
Вибір за тегом: Вибрати всі елементи <li>;
Вибір першого відповідного елемента: Вибрати перший елемент <li> з класом item;
Вибір усіх відповідних елементів: Вибрати всі елементи <li> з класом item.

index.html

index.css

index.js

Використати getElementById для вибору елемента <h1> з ID title;
Використати getElementsByClassName для вибору всіх елементів з класом item;
Використати getElementsByTagName для вибору всіх елементів <li>;
Використати querySelector для вибору першого елемента <li> з класом item;
Використати querySelectorAll для вибору всіх елементів <li> з класом item.

index.html

index.css

index.js

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 3

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you show me the HTML structure of the shopping list?

Can you provide example code for each selection method?

Can you explain the difference between querySelector and querySelectorAll?

Свайпніть щоб показати меню

Вибір за ID: Вибрати елемент <h1> з ID title;
Вибір за класом: Вибрати всі елементи з класом item;
Вибір за тегом: Вибрати всі елементи <li>;
Вибір першого відповідного елемента: Вибрати перший елемент <li> з класом item;
Вибір усіх відповідних елементів: Вибрати всі елементи <li> з класом item.

index.html

index.css

index.js

Використати getElementById для вибору елемента <h1> з ID title;
Використати getElementsByClassName для вибору всіх елементів з класом item;
Використати getElementsByTagName для вибору всіх елементів <li>;
Використати querySelector для вибору першого елемента <li> з класом item;
Використати querySelectorAll для вибору всіх елементів <li> з класом item.

index.html

index.css

index.js

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 3