textContent, innerText, innerHTML
Вопрос
Объясни разницу между textContent, innerText и innerHTML. Что из этого и когда использовать?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
`textContent` возвращает весь текст, включая скрытый, без учёта CSS
`innerText` учитывает стили, возвращает видимый текст и при чтении вызывает пересчёт layout
`innerHTML` читает и пишет разметку, присваивание парсит HTML
Пользовательские данные через `innerHTML` вставлять нельзя: это XSS
Перезапись `innerHTML` пересоздаёт потомков и теряет обработчики и состояние полей
По умолчанию для текста выбирать `textContent`
Что могут спросить следом
- Как безопасно вставить разметку, если она всё же нужна?
- Почему
innerTextмедленнееtextContent? - Что такое
insertAdjacentHTMLи чем он лучшеinnerHTML +=?
Разбор
Все три свойства про содержимое элемента, но на разных уровнях. textContent работает с текстовыми узлами напрямую: отдаёт весь текст, даже скрытый через CSS, а при записи вставляет строку как текст, никакой разметки не создаётся. Это быстро и безопасно, поэтому для вывода текста это выбор по умолчанию. innerText отдаёт текст так, как его видит пользователь: без скрытых элементов и с переносами по блокам. Чтобы это вычислить, браузеру нужен актуальный layout, поэтому чтение может вызвать синхронный reflow. innerHTML работает с разметкой: при записи строка парсится как HTML. Если в ней есть данные пользователя, атакующий может подсунуть, например, <img onerror> и выполнить свой код, это XSS. Ещё одна ловушка: innerHTML += пересоздаёт всех потомков, и навешанные обработчики пропадают. Если разметку вставлять всё же нужно, её строят через createElement, шаблоны с textContent или пропускают через санитайзер вроде DOMPurify.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.