Sự khác biệt giữa textContent, innerText và innerHTML là gì?

innerHTML: get/set HTML markup (nguy cơ XSS nếu set user input). textContent: get/set text của tất cả nodes kể cả ẩn, không trigger reflow. innerText: chỉ lấy text hiển thị (aware of CSS), trigger reflow để tính style. textContent nhanh nhất và an toàn nhất cho text manipulation.

// XSS risk:
el.innerHTML = userInput; // NGUY HIỂM nếu userInput không được sanitize
// An toàn:
el.textContent = userInput; // luôn render as text, không execute HTML

innerHTML: gets/sets HTML markup (XSS risk if setting user input). textContent: gets/sets text of all nodes including hidden ones, does not trigger reflow. innerText: only gets visible text (CSS-aware), triggers reflow to compute styles. textContent is the fastest and safest for text manipulation.

// XSS risk:
el.innerHTML = userInput; // DANGEROUS if userInput is not sanitized
// Safe:
el.textContent = userInput; // always renders as text, never executes HTML