Thuộc tính textContent trong JavaScript
Bùi Tấn Lực - 1038
- 11/09/2025
Chức năng của Thuộc tính textContent trong JavaScript
Thuộc tính textContent trong JavaScript dùng để lấy những chữ có trong thẻ HTML, bao gồm những chữ nằm trong thẻ HTML có css bằng none, nó không lấy các thẻ html mà chỉ lấy chữ ở trong đó, nó giữ nguyên định dạng như khoảng trắng và ngắt dòng.
textContent còn có chức năng nhúng nội dung được lấy vào một thẻ HTML khác, lúc nhúng nó nhúng được cả các thẻ html và chữ được lấy, có cả thẻ HTML có css none, nhưng thẻ html sẽ hoạt động giống như chữ chứ không giống 1 thẻ html.
Cú pháp của Thuộc tính textContent trong JavaScript
Nhúng nội dung:
tenbien.textContent = chuoihtml;
tenbien: Tên biến là phần tử HTML cần nhúng nội dung, thường dùng document.getElementById("giá trị id") để lấy.
chuoihtml: Chuổi HTML sau khi lấy về và dùng để nhúng vào nội dung thẻ HTML tenbien.
Lấy nội dung:
let ketqua = tenbien.textContent;
tenbien: Tên biến là phần tử HTML cần lấy nội dung, thường dùng document.getElementById("giá trị id") để lấy.
ketqua: Kết quả lấy tất cả chữ có trong phần tử HTML cha đó và cả chữ nằm trong các phần tử HTML con có css bằng none.
Code Thuộc tính textContent trong JavaScript
document.getElementById("ketquahai").textContent = tuoihai;
document.getElementById("ketqua").textContent = tuoi;
<h2>Nhúng nội dung</h2>
<div id="tuoi">Năm nay bạn 35 <span style="display:none">tuổi!</span></div>
<div id="ketqua"></div>
<h2>Lấy nội dung</h2>
<div id="tuoihai">Năm nay
bạn 35 <span style="display:none">tuổi!</span></div>
<textarea id="ketquahai"></textarea>
<script>
// innerHTML lấy html
let tuoi = document.getElementById("tuoi").innerHTML;
// textContent Nhúng html đã lấy về id ketqua
document.getElementById("ketqua").textContent = tuoi;
// textContent lấy html
let tuoihai = document.getElementById("tuoihai").textContent;
// textContent Nhúng text đã lấy về
document.getElementById("ketquahai").textContent = tuoihai;
</script>
textContent khác gì innerHTML và innerText?
textContent, innerHTML và innerText đều có thể dùng để lấy hoặc thay đổi nội dung của một phần tử HTML, nhưng cách chúng xử lý dữ liệu không giống nhau. Hiểu đúng sự khác biệt sẽ giúp tránh tình trạng lấy nhầm nội dung hoặc vô tình chèn mã HTML khi thao tác với DOM.
So sánh textContent với innerHTML
textContent làm việc với phần văn bản bên trong phần tử, còn innerHTML lấy cả nội dung HTML nằm bên trong phần tử đó. Vì vậy, nếu chỉ cần đọc hoặc thay đổi văn bản, textContent thường là lựa chọn phù hợp hơn.
Ví dụ, với cấu trúc có phần tử strong bên trong, textContent chỉ trả về phần chữ hiển thị trong phần tử, trong khi innerHTML vẫn giữ lại cấu trúc HTML.
<p id="demo">Xin chào <strong>Web Mới</strong></p>
document.getElementById("demo").textContent;
// Xin chào Web Mới
document.getElementById("demo").innerHTML;
// Xin chào Web Mới
Điểm cần lưu ý là khi gán dữ liệu bằng innerHTML, chuỗi có thể được trình duyệt phân tích thành HTML. Nếu dữ liệu đến từ người dùng hoặc nguồn không đáng tin cậy, không nên tùy tiện đưa trực tiếp vào innerHTML. Với nhu cầu hiển thị văn bản thuần túy, textContent giúp thể hiện đúng mục đích hơn.
So sánh textContent với innerText
textContent lấy văn bản trong DOM, còn innerText quan tâm nhiều hơn đến nội dung văn bản được trình duyệt hiển thị. Vì vậy, hai thuộc tính có thể cho kết quả khác nhau khi phần tử chứa nội dung bị ẩn bằng CSS.
Chẳng hạn, một phần tử có display: none vẫn có nội dung trong DOM. textContent vẫn có thể lấy phần văn bản đó, trong khi innerText thường chỉ phản ánh nội dung đang được hiển thị.
Về mục đích sử dụng, có thể hiểu đơn giản: textContent phù hợp khi cần thao tác trực tiếp với văn bản trong DOM; innerText phù hợp hơn khi cần quan tâm đến cách văn bản xuất hiện đối với người dùng.
Nên dùng textContent trong trường hợp nào?
Nên dùng textContent khi mục tiêu là lấy hoặc thay đổi nội dung dạng văn bản mà không cần trình duyệt diễn giải chuỗi đó thành HTML. Đây là lựa chọn phù hợp cho các thao tác như cập nhật tiêu đề, thông báo, nhãn, nội dung trạng thái hoặc giá trị văn bản được tạo bằng JavaScript.
Nếu dữ liệu cần hiển thị thực sự là mã HTML có cấu trúc, innerHTML mới phù hợp. Ngược lại, nếu cần xác định phần văn bản theo trạng thái hiển thị trên giao diện, có thể cân nhắc innerText.
Tóm lại, hãy chọn thuộc tính dựa trên loại dữ liệu cần xử lý: textContent cho văn bản trong DOM, innerHTML cho nội dung HTML và innerText khi việc hiển thị trên giao diện là yếu tố cần quan tâm.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính textContent trong JavaScript.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
