Свойства узлов

textContent возвращает/задаёт текст элемента (без HTML). innerHTML возвращает/задаёт HTML-содержимое (включая теги). textContent безопаснее и быстрее. innerHTML опасен при недоверенном вводе (XSS).

Содержимое элемента:

• textContent — ТОЛЬКО текст:

element.textContent = 'Привет'; // Установит текст, все вложенные теги будут удалены!

element.textContent // Прочитает весь текст (включая вложенные) // <p>Привет, <b>мир</b></p> → 'Привет, мир'

• innerHTML — HTML-содержимое:

element.innerHTML = '<b>Привет</b>'; // Вставит HTML

element.innerHTML // Прочитает HTML: '<b>Привет</b>'

• outerHTML — весь элемент целиком:

element.outerHTML // '<div id="app"><b>Привет</b></div>'

• innerText — видимый текст (учитывает CSS):

element.innerText // Текст, видимый на странице // Отличается от textContent: учитывает display:none

Разница между textContent и innerHTML:

textContent:

• Быстрее (не парсит HTML)
• Безопаснее (не выполняет скрипты)
• Возвращает/устанавливает простой текст

innerHTML:

• Медленнее (парсит HTML)
• ОПАСЕН с недоверенным вводом!
• Возвращает/устанавливает HTML-разметку

XSS (Cross-Site Scripting): Если пользователь ввёл <script>alert('хак')</script> и вы вставили это через innerHTML — скрипт выполнится!

Поэтому: для простого текста ВСЕГДА используйте textContent.

textContent — как блокнот: вы пишете текст, он отображается как текст. innerHTML — как редактор HTML: вы пишете разметку, браузер её рендерит. Но редактор может выполнить опасный код!

**Самый простой:**

const p = document.querySelector('p');

// Прочитать текст:
console.log(p.textContent); // 'Привет, мир'

// Изменить текст:
p.textContent = 'Новый текст';
console.log(p.textContent); // 'Новый текст'

textContent — самый простой способ прочитать или изменить текст.

**Простой:**

const div = document.getElementById('content');

// innerHTML — вставка HTML:
div.innerHTML = '<h2>Заголовок</h2><p>Параграф</p>';

// textContent — вставка текста:
div.textContent = 'Просто текст'; // HTML-теги будут отображены как текст
console.log(div.innerHTML); // 'Просто текст'

innerHTML интерпретирует HTML-теги. textContent — нет, он просто текст.

**Реальный пример:**

// ⚠️ XSS атака через innerHTML:
const userInput = '<img src=x onerror=alert("Хак!")>';

dangerousDiv.innerHTML = userInput; // ОПАСНО! Alert выполнится!
safeDiv.textContent = userInput;    // Безопасно! Покажет текст как есть

// Правило: для пользовательского ввода — ВСЕГДА textContent

innerHTML выполняет JavaScript-код в тегах. textContent — безопасен.

**Неправильно:** Использовать innerHTML для простого текста

**Почему:** innerHTML медленнее и опаснее. Для текста — textContent.

**Правильно:** textContent для текста, innerHTML только если нужно вставить HTML.

**Неправильно:** Думать, что textContent и innerText — одно и то же

**Почему:** innerText учитывает CSS (display:none). textContent — нет.

**Правильно:** textContent быстрее. innerText — только если нужно учесть видимость.

**Неправильно:** Вставлять пользовательский ввод через innerHTML

**Почему:** XSS: вредоносный HTML/JS выполнится на странице.

**Правильно:** Для пользовательского ввода — textContent или специальные библиотеки.

**Неправильно:** Забывать, что textContent удаляет все вложенные теги

**Почему:** element.textContent = 'Текст' удалит все <b>, <i> и другие теги внутри.

**Правильно:** textContent заменяет ВСЁ содержимое текстом. Для сохранения тегов — innerHTML.

• textContent — текст (безопасно, быстро)
• innerHTML — HTML (опасно с пользовательским вводом!)
• outerHTML — весь элемент целиком
• Для простого текста — ВСЕГДА textContent
• innerHTML выполняет скрипты в тегах — XSS!

Назад: Вы умеете находить элементы (D3) — теперь вы умеете читать и менять их содержимое.

Вперёд: Следующий урок (D5) объясняет ключевую разницу между HTML-атрибутами и DOM-свойствами.