Вопрос с собеседования · Frontend

Как найти и изменить элементы DOM на JavaScript?

JuniorБраузер и DOM
Ещё спрашивают так:
  • Чем querySelector отличается от getElementById?
  • Чем textContent отличается от innerHTML?
Коротко

Найти: querySelector(css-селектор) — первый элемент, querySelectorAll — статический список. Изменить: textContent — текст (безопасно), innerHTML — разметка (опасно с пользовательскими данными — XSS), classList.add/remove/toggle, setAttribute, dataset. Создать: createElement + append. Много вставок — через DocumentFragment или одну вставку, чтобы не вызывать лишние reflow.

  • Стили — через классы, а не через element.style
  • element.remove() — удалить
  • Скрипт должен работать после построения DOM (defer или DOMContentLoaded)

Подробно

const list = document.querySelector('#todo');
const li = document.createElement('li');
li.textContent = userInput;   // не innerHTML!
li.classList.add('item');
list.append(li);

Что хотят услышать

  • querySelector и querySelectorAll.
  • textContent против innerHTML и XSS.
  • classList, createElement.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓querySelector ищет, textContent безопасно меняет текст, innerHTML с вводом пользователя — XSS
  • ✗innerHTML безопасен для вставки пользовательского текста: браузер сам экранирует теги и скрипты
  • ✗querySelectorAll возвращает только первый найденный элемент
  • ✗Менять DOM можно только через jQuery или фреймворк

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования