CCA Prep
JS-Dev-101EN

Урок 3.2Урок 13 з 24

Робота з DOM

Given a business requirement, evaluate and manipulate the DOM.

Робота з DOMСтатичний NodeListquerySelectorAllЗнімок, зроблений у момент викликуМає forEachЖива HTMLCollectiongetElementsByClassName іgetElementsByTagNameОновлюється, коли змінюється сторінкаНемає forEach; використовуйтеArray.from або for...ofchildNodes — живий NodeList, який містить і текстові вузли; children міститьлише елементи

Головне

  1. 1querySelector повертає перший збіг або null; querySelectorAll повертає статичний NodeList, який не змінюється, коли змінюється сторінка.
  2. 2getElementsByClassName і getElementsByTagName повертають живі HTMLCollection, які оновлюються, коли елементи додаються, видаляються або змінюють клас.
  3. 3textContent задає звичайний текст, тож безпечний для даних, які ввів користувач. innerHTML парсить HTML, може виконати код через вставлені атрибути, як-от onerror, і перебудовує всі дочірні вузли.
  4. 4createElement, а потім append, prepend або before — щоб вставити, і remove — щоб видалити. classList додає, видаляє й перемикає один клас, не зачіпаючи інших.
  5. 5Атрибути зберігають початкові значення з розмітки; властивості, як-от input.value, — поточний стан. Атрибути data-* читають через dataset у camelCase.
Що перевіряє іспит із цієї теми

Формулювання з програми іспиту (англійською).

  • 3.2.K1Selecting elements: querySelector(All), getElementById, live vs static collections
  • 3.2.K2Creating, inserting and removing nodes; textContent vs innerHTML; attributes and classList
  • 3.2.S1Choose the DOM code that produces the required page change

Закріпіть тему

Дайте відповідь на запитання за сценаріями з цієї теми. До кожного варіанта є розбір.

Тренування 3.2 · 12 запитань