JS JavaScript · 25 вопросов · ~70 мин · ⏱ Таймер 10:00 · Средний ·

DOM: поиск и изменение документа

Тест проверяет выбор элементов, статические и живые коллекции, создание и перемещение узлов, безопасную вставку текста, атрибуты и свойства. Отдельные задания посвящены стоимости измерений и записей layout, DocumentFragment и поиску удерживаемых удалённых узлов.

Отвечено: 0 из 25

⏱ --:--

💡 Инструкция: Выберите один ответ из пяти. В тесте 25 вопросов и 70 минут; код лучше читать построчно, не полагаясь на первое впечатление. После завершения откроются общий процент, 5 тематических шкал и объяснение каждого решения.

Вопрос 1 из 25

Что возвращает document.querySelector(".item")?

const item = document.querySelector(".item");
console.log(item);

Всегда NodeList Первый совпавший Element или null Текст первого элемента Живую HTMLCollection Все совпадения как массив

Вопрос 2 из 25

Обновится ли список после добавления нового элемента?

const list = document.querySelectorAll(".item");
document.body.insertAdjacentHTML("beforeend", '<div class="item"></div>');
console.log(list.length);

Нет, NodeList querySelectorAll является статическим снимком Список станет массивом Возникнет TypeError Да, но только после await Да, querySelectorAll возвращает живую коллекцию

Вопрос 3 из 25

Как поведёт себя getElementsByClassName?

const live = document.getElementsByClassName("item");
container.append(Object.assign(document.createElement("div"), { className: "item" }));
console.log(live.length);

Вернёт живую HTMLCollection, отражающую изменения документа Вернёт статический снимок, который не меняется после запроса Вернёт только первый элемент с указанным классом Вернёт Promise, разрешающийся после следующего обновления DOM Скопирует найденные элементы в новый независимый массив

Вопрос 4 из 25

Для чего нужен element.closest(selector)?

const button = event.target.closest("button[data-action]");

Проверяет текущий элемент, а затем последовательно обходит его потомков Ищет сам элемент и ближайшего подходящего предка Возвращает все совпадения Создаёт новый элемент Ищет только потомков

Вопрос 5 из 25

Что произойдёт при синтаксически неверном CSS-селекторе?

document.querySelector("div[");

Будет выброшено DOMException SyntaxError Селектор автоматически экранируется querySelector вернёт null Будет выбран body Вернётся пустой массив

Вопрос 6 из 25

Что произойдёт при append уже существующего узла в другой контейнер?

const node = first.querySelector(".card");
second.append(node);

Узел станет строкой Узел переместится из старого места в новое Оба контейнера будут владеть одним узлом одновременно Будет выброшен TypeError Создастся его копия

Вопрос 7 из 25

Что делает DocumentFragment после append в документ?

const fragment = document.createDocumentFragment();
fragment.append(document.createElement("li"));
list.append(fragment);
console.log(fragment.childNodes.length);

Fragment остаётся родителем в документе Вставка запрещена Все дети клонируются дважды Вставляются его дочерние узлы, а fragment опустошается Сам fragment становится видимым контейнером

Вопрос 8 из 25

Копирует ли cloneNode(true) обработчики, добавленные addEventListener?

const source = document.querySelector("button");
source.addEventListener("click", save);
const copy = source.cloneNode(true);

Копируются только handlers, зарегистрированные в capture-фазе Да, однако скопированные handlers вызываются без this Копируются только listeners, зарегистрированные с параметром once Глубокая копия переносит обработчики, если они были добавлены до клонирования Нет: копируются узлы и атрибуты, но не listeners addEventListener

Вопрос 9 из 25

Как безопасно создать элемент с пользовательским текстом?

const userText = form.elements.comment.value;
const p = document.createElement("p");
// Как записать userText и вставить p?

Присвоить строку outerHTML контейнера без дополнительной обработки Подставить строку в шаблон и присвоить результат innerHTML Выполнить пользовательский текст через eval и вставить результат Передать пользовательскую строку в document.write внутри готовой страницы Создать p, записать textContent и добавить узел в контейнер

Вопрос 10 из 25

Почему полезно отделять функцию createCard(data) от document.querySelector?

Чтобы создание зависело от data, а место вставки выбирал caller Чтобы cloneNode переносил все listeners созданной карточки Чтобы карточке нельзя было назначать CSS-классы Чтобы созданные функцией узлы нельзя было удалить из документа Чтобы createCard всегда возвращала Promise с готовым элементом

Вопрос 11 из 25

Что выведет textContent после записи строки с тегами?

const div = document.createElement("div");
div.textContent = "<b>Привет</b>";
console.log(div.textContent);

Возникнет SyntaxError Строку <b>Привет</b> как текст Будет выполнен HTML Пустую строку Жирный текст без тегов

Вопрос 12 из 25

Какому dataset-свойству соответствует data-user-id?

const row = document.querySelector("[data-user-id]");
// Как прочитать значение data-user-id через dataset?

dataset.userid без заглавной I dataset["user-id"] dataset.userId dataset.user_id dataset["data-user-id"]

Вопрос 13 из 25

Что делает classList.toggle("open", false)?

Удаляет класс и возвращает false Переключает случайно Всегда добавляет класс Очищает все классы Меняет id

Вопрос 14 из 25

Как корректно отключить кнопку через DOM-свойство?

const button = document.querySelector("#submit");
// Нужно сделать кнопку недоступной до завершения запроса.

button.value = "disabled" button.setAttribute("disabled", "false") button.dataset.disabled = true button.disabled = true button.className = "disabled"

Вопрос 15 из 25

Почему input.getAttribute("value") может отличаться от input.value?

const input = document.querySelector("input");
input.value = "новое";
console.log(input.getAttribute("value"), input.value);

getAttribute возвращает boolean вместо значения атрибута Свойство value доступно только CSS и не читается JavaScript Различие возможно исключительно у элементов checkbox Свойство value не изменяется при пользовательском вводе Атрибут хранит исходное значение, свойство — текущее

Вопрос 16 из 25

Какой фрагмент чаще провоцирует повторные forced layout?

Econtainer.append(fragment); Dconst count = items.length; A

for (const el of items) {
  el.style.width = "100px";
}

for (const el of items) {
  el.style.width = `${el.offsetWidth + 1}px`;
}

Citems.forEach(el => el.classList.add("ready"));

Вопрос 17 из 25

Как уменьшить layout thrashing в цикле?

for (const item of items) {
  item.style.width = `${item.offsetWidth + 10}px`;
}

Вызывать getComputedStyle дважды Чередовать чтение и запись для каждого элемента Добавить больше querySelector Сначала собрать все размеры, затем отдельным проходом выполнить записи Использовать innerHTML для каждого свойства

Вопрос 18 из 25

Для чего requestAnimationFrame подходит лучше setTimeout при визуальном обновлении?

function move() {
  box.style.transform = `translateX(${x++}px)`;
  requestAnimationFrame(move);
}

Он гарантирует ровно 60 кадров в секунду на любом устройстве Callback привязан к подходящему обновлению кадра браузером Callback выполняется в Worker и не занимает главный поток Вызов автоматически отменяет все активные CSS transitions requestAnimationFrame всегда выполняется раньше любой микрозадачи

Вопрос 19 из 25

Всегда ли DocumentFragment даёт большое ускорение?

Нет: современные движки оптимизируют вставки; пользу нужно измерять Нет: append с несколькими аргументами всегда делает fragment бесполезным Да: fragment гарантирует один layout независимо от дальнейших чтений Польза появляется только при создании элементов через innerHTML Да: узлы внутри fragment не участвуют в style recalculation до append

Вопрос 20 из 25

Почему изменение одного класса иногда лучше серии inline-style?

CSS-классы применяются в отдельном потоке и не затрагивают main thread Стандарт запрещает изменять inline style из JavaScript Один класс яснее выражает состояние и применяет связанный набор правил Свойство className не влияет на вычисленные стили элемента Применение класса гарантированно исключает любые перерасчёты layout

Вопрос 21 из 25

Почему querySelector возвращает null сразу в <head> для элемента из конца body?

<head>
  <script src="app.js"></script>
</head>
<body>
  <button id="save">Сохранить</button>
</body>

Скрипт выполняется до разбора нужной разметки DOM доступен только после load изображений Элемент обязан иметь id Нужен Promise.resolve querySelector не работает в head

Вопрос 22 из 25

Что такое detached DOM node в профиле памяти?

const cache = new Map();
const panel = document.querySelector(".panel");
cache.set("old", panel);
panel.remove();

Удалённый из документа узел, который всё ещё удерживает JavaScript Любой элемент с display:none независимо от наличия ссылок Любой узел внутри DocumentFragment до первой вставки Обычный текстовый узел, не имеющий дочерних элементов Элемент без class и id в текущем документе

Вопрос 23 из 25

Когда MutationObserver вызывает callback?

Только после полной перезагрузки наблюдаемого документа Синхронно внутри каждой отдельной операции изменения DOM Периодически раз в секунду независимо от числа изменений Только после загрузки или изменения внешнего CSS-файла Асинхронно пакетами записей после изменений на контрольной точке

Вопрос 24 из 25

Как проверить, что listener не накапливается при повторном монтаже?

Очистить console перед каждым открытием компонента Несколько раз mount/unmount, затем проверить один вызов и cleanup Сравнить количество строк HTML до и после повторного монтажа Перейти на onclick, поскольку он сам удаляется при демонтаже Заморозить document через Object.freeze до регистрации listener

Вопрос 25 из 25

Что собрать при ошибке «элемент есть на экране, но поиск его не видит»?

Только снимок экрана без состояния DOM и момента поиска Корень поиска, момент, селектор, iframe/shadow DOM и дерево узла Историю переходов браузера перед появлением элемента Размер шрифта и масштаб страницы в проблемном браузере Общее число открытых вкладок и окон текущего профиля

Ответьте на все 25 вопросов, чтобы получить результат

🔗 Встроить тест на свой сайт (iframe) ▼

Скопируйте код и вставьте в любое место на вашем сайте:

Также доступна прямая ссылка на embed-страницу