HTML DOM textContent Thuộc tính
Thí dụ
Nhận nội dung văn bản của một phần tử:
var x =
document.getElementById("myBtn").textContent;
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc tính textContent đặt hoặc trả về nội dung văn bản của nút được chỉ định và tất cả các nút con của nó .
Nếu bạn đặt thuộc tính textContent, bất kỳ nút con nào sẽ bị xóa và được thay thế bằng một nút Văn bản duy nhất có chứa chuỗi được chỉ định.
Lưu ý: Thuộc tính này tương tự với thuộc tính innerText , tuy nhiên có một số điểm khác biệt:
- textContent trả về nội dung văn bản của tất cả các phần tử, trong khi innerText trả về nội dung của tất cả các phần tử, ngoại trừ các phần tử <script> và <style>.
- innerText sẽ không trả về văn bản của các phần tử bị ẩn bằng CSS (textContent sẽ).
Mẹo: Đôi khi thuộc tính này có thể được sử dụng thay cho thuộc tính nodeValue , nhưng hãy nhớ rằng thuộc tính này cũng trả về văn bản của tất cả các nút con.
Mẹo: Để đặt hoặc trả về nội dung HTML của một phần tử, hãy sử dụng thuộc tính innerHTML .
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Cú pháp
Trả lại nội dung văn bản của một nút:
node.textContent
Đặt nội dung văn bản của một nút:
node.textContent = text
Giá trị tài sản
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
Chi tiết kỹ thuật
Giá trị trả lại: | Một chuỗi, đại diện cho văn bản của nút và tất cả các phần tử con của nó. Trả về null nếu phần tử là tài liệu, kiểu tài liệu hoặc ký hiệu. |
---|---|
Phiên bản DOM | Đối tượng nút cấp 3 cốt lõi |
Các ví dụ khác
Thí dụ
Thay đổi nội dung văn bản của phần tử <p> với id = "demo":
document.getElementById("demo").textContent = "Paragraph changed!";
Thí dụ
Nhận tất cả nội dung văn bản của phần tử <ul> với id = "myList":
var x = document.getElementById("myList").textContent;
Giá trị của x sẽ là:
Coffee Tea
Thí dụ
Ví dụ này minh họa một số khác biệt giữa innerText, innerHTML và textContent:
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
Lấy nội dung của phần tử <p> ở trên với các thuộc tính được chỉ định:
innerText trả về: "Phần tử này có thêm khoảng cách và chứa phần tử span."
innerHTML trả về: "Phần tử này có thêm khoảng cách và chứa <span> phần tử span </span>".
textContent trả về: "Phần tử này có thêm khoảng cách và chứa phần tử span."
Thuộc tính innerText chỉ trả về văn bản, không có khoảng cách và các thẻ phần tử bên trong.
Thuộc tính innerHTML trả về văn bản, bao gồm tất cả các thẻ khoảng cách và phần tử bên trong.
Thuộc tính textContent trả về văn bản có khoảng cách, nhưng không có thẻ phần tử bên trong.