Thuộc tính textContent của Element HTML DOM

Định nghĩa và cách sử dụng

textContent Thuộc tính này thiết lập hoặc trả về nội dung văn bản của một nút cụ thể, cũng như tất cả các nút con của nó.

Nếu bạn đã đặt textContent Thuộc tính này sẽ xóa tất cả các nút con và được thay thế bằng một nút văn bản duy nhất chứa chuỗi được cung cấp.

Lưu ý:Đôi khi, thuộc tính này có thể được sử dụng để thay thế thuộc tính nodeValue, nhưng hãy nhớ rằng thuộc tính này sẽ trả về tất cả các văn bản của các nút con.

Xem thêm:

Thuộc tính innerText

Thuộc tính innerHTML

Mô hình

Ví dụ 1

Trả về nội dung văn bản của phần tử:

let text = element.textContent;

Thử ngay!

Ví dụ 2

Thay đổi nội dung văn bản của phần tử <p> có id="demo":

element.textContent = "I have changed!";

Thử ngay!

Ví dụ 3

Lấy tất cả nội dung văn bản của phần tử <ul> có id="myList":

let text = document.getElementById("myList").textContent;

Thử ngay!

Cú pháp

Trả về nội dung văn bản của nút:

element.textContent

hoặc

node.textContent

Đặt nội dung văn bản của nút:

element.textContent = text
node.textContent = text

Giá trị thuộc tính

Giá trị Mô tả
text Nội dung văn bản của phần tử hoặc nút.

Giá trị trả về

Loại Mô tả
Chuỗi

Nội dung văn bản của phần tử và tất cả các hậu duệ.

Nếu phần tử là document, document type hoặc notation, thì trả về null.

Khác biệt giữa innerHTML, innerText và textContent

属性 innerText trả về:

Chỉ trả về nội dung văn bản của phần tử và tất cả các hậu duệ, không có khoảng trống ẩn CSS và thẻ, trừ phần tử <script> và <style>.

属性 innerHTML trả về:

Nội dung văn bản của phần tử, bao gồm tất cả khoảng trống và thẻ HTML nội bộ.

属性 textContent trả về:

Nội dung văn bản của phần tử và tất cả các hậu duệ, bao gồm khoảng trống và văn bản ẩn CSS, nhưng không có thẻ.

Mẫu HTML

<p id="myP">   This element has extra spacing     and contains <span>a span element</span>.</p>

Cụm từ JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Thử ngay!

Trong ví dụ trên:

属性 innerText trả về:

This element has extra spacing and contains a span element.

属性 innerHTML trả về:

   This element has extra spacing    and contains <span>a span element</span>.

属性 textContent trả về:

   This element has extra spacing    and contains a span element.

Hỗ trợ trình duyệt

element.textContent Là tính năng DOM Level 3 (2004).

Tất cả trình duyệt đều hỗ trợ hoàn toàn nó:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ